diff --git a/client/nginx/nginx.template b/client/nginx/nginx.template
index c670fedf2..32c70d488 100644
--- a/client/nginx/nginx.template
+++ b/client/nginx/nginx.template
@@ -83,6 +83,7 @@ http {
     }
 
     log_format main escape=json '{ "nginx": {'
+      '"http_x_user_id":"$http_x_user_id",'
       '"http_x_forwarded_for":"$http_x_forwarded_for",'
       '"http_referer":"$http_referer",'
       '"http_user_agent":"$http_user_agent",'
diff --git a/client/package-lock.json b/client/package-lock.json
index 478f55c46..abe8b5488 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -3963,6 +3963,44 @@
         }
       }
     },
+    "@fullhuman/postcss-purgecss": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz",
+      "integrity": "sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.32",
+        "purgecss": "^2.3.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -5618,16 +5656,6 @@
       "integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==",
       "dev": true
     },
-    "@types/mini-css-extract-plugin": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.1.tgz",
-      "integrity": "sha512-+mN04Oszdz9tGjUP/c1ReVwJXxSniLd7lF++sv+8dkABxVNthg6uccei+4ssKxRHGoMmPxdn7uBdJWONSJGTGQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@types/webpack": "*"
-      }
-    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -7878,6 +7906,84 @@
             "webpack-sources": "^1.4.3"
           }
         },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.0.0-beta.8",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
+          "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          },
+          "dependencies": {
+            "big.js": {
+              "version": "5.2.2",
+              "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+              "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+              "dev": true,
+              "optional": true
+            },
+            "chalk": {
+              "version": "4.1.0",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+              "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+              }
+            },
+            "emojis-list": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+              "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+              "dev": true,
+              "optional": true
+            },
+            "has-flag": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+              "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+              "dev": true,
+              "optional": true
+            },
+            "json5": {
+              "version": "2.1.3",
+              "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+              "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "minimist": "^1.2.5"
+              }
+            },
+            "loader-utils": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+              "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "big.js": "^5.2.2",
+                "emojis-list": "^3.0.0",
+                "json5": "^2.1.2"
+              }
+            },
+            "supports-color": {
+              "version": "7.2.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+              "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "has-flag": "^4.0.0"
+              }
+            }
+          }
+        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -8275,6 +8381,31 @@
       "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==",
       "dev": true
     },
+    "acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz",
+          "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
+          "dev": true
+        },
+        "acorn-walk": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+          "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+          "dev": true
+        }
+      }
+    },
     "acorn-walk": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.2.0.tgz",
@@ -10306,6 +10437,12 @@
       "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
       "dev": true
     },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true
+    },
     "camelcase-keys": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-4.2.0.tgz",
@@ -11876,6 +12013,12 @@
         }
       }
     },
+    "css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
+      "dev": true
+    },
     "css-what": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
@@ -12535,6 +12678,12 @@
         }
       }
     },
+    "defined": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
+      "dev": true
+    },
     "del": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz",
@@ -12647,6 +12796,17 @@
         "debug": "^2.6.0"
       }
     },
+    "detective": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
+      "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
+      "dev": true,
+      "requires": {
+        "acorn-node": "^1.6.1",
+        "defined": "^1.0.0",
+        "minimist": "^1.1.1"
+      }
+    },
     "diff-sequences": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.9.0.tgz",
@@ -19380,6 +19540,12 @@
       "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=",
       "dev": true
     },
+    "lodash.toarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
+      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
+      "dev": true
+    },
     "lodash.transform": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz",
@@ -20139,6 +20305,15 @@
         }
       }
     },
+    "node-emoji": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
+      "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
+      "dev": true,
+      "requires": {
+        "lodash.toarray": "^4.4.0"
+      }
+    },
     "node-fetch": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
@@ -21679,6 +21854,37 @@
         "postcss": "^7.0.2"
       }
     },
+    "postcss-functions": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
+      "integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.2",
+        "object-assign": "^4.1.1",
+        "postcss": "^6.0.9",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
     "postcss-gap-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz",
@@ -21717,6 +21923,16 @@
         "postcss": "^7.0.2"
       }
     },
+    "postcss-js": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
+      "integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
+      "dev": true,
+      "requires": {
+        "camelcase-css": "^2.0.1",
+        "postcss": "^7.0.18"
+      }
+    },
     "postcss-jsx": {
       "version": "0.36.4",
       "resolved": "https://registry.npmjs.org/postcss-jsx/-/postcss-jsx-0.36.4.tgz",
@@ -22667,6 +22883,64 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
+    "purgecss": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-2.3.0.tgz",
+      "integrity": "sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==",
+      "dev": true,
+      "requires": {
+        "commander": "^5.0.0",
+        "glob": "^7.0.0",
+        "postcss": "7.0.32",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+          "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "postcss-selector-parser": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.3.tgz",
+          "integrity": "sha512-0ClFaY4X1ra21LRqbW6y3rUbWcxnSVkDFG57R7Nxus9J9myPFlv+jYDMohzpkBx0RrjjiqjtycpchQ+PLGmZ9w==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^3.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1",
+            "util-deprecate": "^1.0.2"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -23385,6 +23659,16 @@
         "strip-indent": "^2.0.0"
       }
     },
+    "reduce-css-calc": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz",
+      "integrity": "sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==",
+      "dev": true,
+      "requires": {
+        "css-unit-converter": "^1.1.1",
+        "postcss-value-parser": "^3.3.0"
+      }
+    },
     "refractor": {
       "version": "2.10.1",
       "resolved": "https://registry.npmjs.org/refractor/-/refractor-2.10.1.tgz",
@@ -25613,6 +25897,168 @@
         }
       }
     },
+    "tailwindcss": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.8.10.tgz",
+      "integrity": "sha512-7QkERG/cWCzsuMqHMwjOaLMVixOGLNBiXsrkssxlE1aWfkxVbGqiuMokR2162xRyaH2mBIHKxmlf1qb3DvIPqw==",
+      "dev": true,
+      "requires": {
+        "@fullhuman/postcss-purgecss": "^2.1.2",
+        "autoprefixer": "^9.4.5",
+        "browserslist": "^4.12.0",
+        "bytes": "^3.0.0",
+        "chalk": "^3.0.0 || ^4.0.0",
+        "color": "^3.1.2",
+        "detective": "^5.2.0",
+        "fs-extra": "^8.0.0",
+        "html-tags": "^3.1.0",
+        "lodash": "^4.17.20",
+        "node-emoji": "^1.8.1",
+        "normalize.css": "^8.0.1",
+        "object-hash": "^2.0.3",
+        "postcss": "^7.0.11",
+        "postcss-functions": "^3.0.0",
+        "postcss-js": "^2.0.0",
+        "postcss-nested": "^4.1.1",
+        "postcss-selector-parser": "^6.0.0",
+        "postcss-value-parser": "^4.1.0",
+        "pretty-hrtime": "^1.0.3",
+        "reduce-css-calc": "^2.1.6",
+        "resolve": "^1.14.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "browserslist": {
+          "version": "4.14.4",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.4.tgz",
+          "integrity": "sha512-7FOuawafVdEwa5Jv4nzeik/PepAjVte6HmVGHsjt2bC237jeL9QlcTBDF3PnHEvcC6uHwLGYPwZHNZMB7wWAnw==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001135",
+            "electron-to-chromium": "^1.3.570",
+            "escalade": "^3.1.0",
+            "node-releases": "^1.1.61"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001135",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001135.tgz",
+          "integrity": "sha512-ziNcheTGTHlu9g34EVoHQdIu5g4foc8EsxMGC7Xkokmvw0dqNtX8BS8RgCgFBaAiSp2IdjvBxNdh0ssib28eVQ==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "electron-to-chromium": {
+          "version": "1.3.571",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.571.tgz",
+          "integrity": "sha512-UYEQ2Gtc50kqmyOmOVtj6Oqi38lm5yRJY3pLuWt6UIot0No1L09uu6Ja6/1XKwmz/p0eJFZTUZi+khd1PV1hHA==",
+          "dev": true
+        },
+        "escalade": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.0.tgz",
+          "integrity": "sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig==",
+          "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"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "html-tags": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
+          "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
+          "dev": true
+        },
+        "jsonfile": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        },
+        "node-releases": {
+          "version": "1.1.61",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.61.tgz",
+          "integrity": "sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==",
+          "dev": true
+        },
+        "object-hash": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.0.3.tgz",
+          "integrity": "sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.3.tgz",
+          "integrity": "sha512-0ClFaY4X1ra21LRqbW6y3rUbWcxnSVkDFG57R7Nxus9J9myPFlv+jYDMohzpkBx0RrjjiqjtycpchQ+PLGmZ9w==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^3.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1",
+            "util-deprecate": "^1.0.2"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+          "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -26793,6 +27239,16 @@
         }
       }
     },
+    "vue-cli-plugin-tailwind": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/vue-cli-plugin-tailwind/-/vue-cli-plugin-tailwind-1.5.0.tgz",
+      "integrity": "sha512-uLzAhudKcioOerL/n/17YDonH9kHNJy1xrSYWIdIQUwq7804Rj/oIufWTDcbdtib0kQ7TIPAwEM0xo+XqnPwIg==",
+      "dev": true,
+      "requires": {
+        "@fullhuman/postcss-purgecss": "^2.3.0",
+        "tailwindcss": "^1.8.9"
+      }
+    },
     "vue-cli-plugin-vuetify": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.7.tgz",
@@ -26910,79 +27366,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.0.0-beta.7",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
-      "integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@types/mini-css-extract-plugin": "^0.9.1",
-        "chalk": "^3.0.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^1.2.3",
-        "merge-source-map": "^1.1.0",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true,
-          "optional": true
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-property-decorator": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.0.0.tgz",
diff --git a/client/package.json b/client/package.json
index 1bb861ea2..a3bf18302 100644
--- a/client/package.json
+++ b/client/package.json
@@ -100,6 +100,7 @@
     "vue-cli-plugin-storybook": "~1.2.2",
     "vue-cli-plugin-vuetify": "^2.0.7",
     "vue-template-compiler": "^2.6.12",
+    "vue-cli-plugin-tailwind": "~1.5.0",
     "vuetify-loader": "^1.6.0"
   },
   "eslintConfig": {
@@ -141,6 +142,7 @@
   },
   "postcss": {
     "plugins": {
+      "tailwindcss": {},
       "autoprefixer": {},
       "postcss-preset-env": {},
       "postcss-nested-ancestors": {},
diff --git a/client/src/api/api-admin.js b/client/src/api/api-admin.js
index 7b174d9a3..460a18924 100644
--- a/client/src/api/api-admin.js
+++ b/client/src/api/api-admin.js
@@ -149,6 +149,19 @@ const apiAdmin = {
     return json
   },
 
+  async createPlaces ({ centre, inspecteur, dates }) {
+    const json = await apiClient.post(`${apiPaths.admin.places}`, {
+      headers: getHeadersForAdminJson(),
+      body: JSON.stringify({
+        departement: centre.departement,
+        centre,
+        inspecteur,
+        dates,
+      }),
+    })
+    return json
+  },
+
   async deletePlace (placeId) {
     const json = await apiClient.delete(
         `${apiPaths.admin.places}/${placeId}`,
diff --git a/client/src/assets/tailwind.pcss b/client/src/assets/tailwind.pcss
new file mode 100644
index 000000000..7f393742a
--- /dev/null
+++ b/client/src/assets/tailwind.pcss
@@ -0,0 +1,5 @@
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;
diff --git a/client/src/main.js b/client/src/main.js
index d7a0657b0..a974e43c2 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -9,6 +9,7 @@ import './registerServiceWorker'
 
 import './main.styl'
 import vuetify from './plugins/vuetify'
+import './assets/tailwind.pcss'
 
 Vue.config.productionTip = false
 
diff --git a/client/src/store/admin.js b/client/src/store/admin.js
index 7ad07032a..6682765bc 100644
--- a/client/src/store/admin.js
+++ b/client/src/store/admin.js
@@ -56,6 +56,10 @@ export const CREATE_PLACE_REQUEST = 'CREATE_PLACE_REQUEST'
 export const CREATE_PLACE_SUCCESS = 'CREATE_PLACE_SUCCESS'
 export const CREATE_PLACE_FAILURE = 'CREATE_PLACE_FAILURE'
 
+export const CREATE_PLACES_REQUEST = 'CREATE_PLACES_REQUEST'
+export const CREATE_PLACES_SUCCESS = 'CREATE_PLACES_SUCCESS'
+export const CREATE_PLACES_FAILURE = 'CREATE_PLACES_FAILURE'
+
 export const ASSIGN_CANDIDAT_TO_CRENEAU = 'ASSIGN_CANDIDAT_TO_CRENEAU'
 
 export const DELETE_BOOKED_PLACE_REQUEST = 'DELETE_BOOKED_PLACE_REQUEST'
@@ -301,6 +305,18 @@ export default {
       state.places.isCreating = false
     },
 
+    [CREATE_PLACES_REQUEST] (state) {
+      state.places.isCreating = true
+    },
+    [CREATE_PLACES_SUCCESS] (state, success) {
+      state.places.created = success
+      state.places.isCreating = false
+    },
+    [CREATE_PLACES_FAILURE] (state, error) {
+      state.places.created = error
+      state.places.isCreating = false
+    },
+
     [DELETE_BOOKED_PLACE_REQUEST] (state) {
       state.isDeletingBookedPlace = true
     },
@@ -566,18 +582,33 @@ export default {
       const { centre, inspecteur, date } = placeData
       commit(CREATE_PLACE_REQUEST)
       try {
-        const result = await api.admin.createPlace(centre, inspecteur, date)
-        if (!result.success) {
-          throw new Error(result.message)
+        const response = await api.admin.createPlace(centre, inspecteur, date)
+        if (!response.success) {
+          throw new Error(response.message)
         }
-        commit(CREATE_PLACE_SUCCESS, result)
-        dispatch(SHOW_SUCCESS, result.message)
+        commit(CREATE_PLACE_SUCCESS, response)
+        dispatch(SHOW_SUCCESS, response.message)
       } catch (error) {
         commit(CREATE_PLACE_FAILURE, error)
         return dispatch(SHOW_ERROR, error.message)
       }
     },
 
+    async [CREATE_PLACES_REQUEST] ({ commit, dispatch, state }, placesData = {}) {
+      commit(CREATE_PLACES_REQUEST)
+      try {
+        const response = await api.admin.createPlaces(placesData)
+        if (!response.success) {
+          throw new Error(response.error || response.message)
+        }
+        commit(CREATE_PLACES_SUCCESS, response)
+        dispatch(SHOW_SUCCESS, response.message)
+      } catch (error) {
+        commit(CREATE_PLACES_FAILURE, error)
+        return dispatch(SHOW_ERROR, error.message)
+      }
+    },
+
     async [ASSIGN_CANDIDAT_TO_CRENEAU] ({ dispatch, state }, assignData = {}) {
       const { placeId, candidatId } = assignData
       try {
diff --git a/client/src/util/creneauSetting.js b/client/src/util/creneauSetting.js
index 2291d5351..a47bc9e69 100644
--- a/client/src/util/creneauSetting.js
+++ b/client/src/util/creneauSetting.js
@@ -17,6 +17,29 @@ export const creneauSetting = [
   '15h30',
 ]
 
+export const creneauMorningAfternoonSetting = {
+  morning: [
+    '07h00',
+    '07h30',
+    '08h00',
+    '08h30',
+    '09h00',
+    '09h30',
+    '10h00',
+    '10h30',
+    '11h00',
+    '11h30',
+  ],
+  afternoon: [
+    '13h00',
+    '13h30',
+    '14h00',
+    '14h30',
+    '15h00',
+    '15h30',
+  ],
+}
+
 export const creneauAvailable = [
   '07:00',
   '07:30',
diff --git a/client/src/util/dictionary.js b/client/src/util/dictionary.js
new file mode 100644
index 000000000..0bbf0c36b
--- /dev/null
+++ b/client/src/util/dictionary.js
@@ -0,0 +1,9 @@
+
+export const inspecteurProfileInfoDictionary = [
+  [
+    ['prenom', 'Prenom'],
+    ['nom', 'Nom'],
+    ['email', 'Email'],
+    ['departement', 'Département'],
+  ],
+]
diff --git a/client/src/util/index.js b/client/src/util/index.js
index 76745d94f..f0967d1c9 100644
--- a/client/src/util/index.js
+++ b/client/src/util/index.js
@@ -5,3 +5,4 @@ export * from './frenchDateTime'
 export * from './regex'
 export * from './transformers'
 export * from './transformFile'
+export * from './dictionary'
diff --git a/client/src/views/admin/components/CandilibAutocomplete.vue b/client/src/views/admin/components/CandilibAutocomplete.vue
index 3e1d0f6e6..df9e3f682 100644
--- a/client/src/views/admin/components/CandilibAutocomplete.vue
+++ b/client/src/views/admin/components/CandilibAutocomplete.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="u-flex  u-flex--center  u-flex--v-start">
+  <div class="flex flex-wrap align-center justify-center">
     <v-autocomplete
       v-model="selected"
       :label="label"
diff --git a/client/src/views/admin/components/SearchInspecteur.vue b/client/src/views/admin/components/SearchInspecteur.vue
index f2c981f1f..b252fddfb 100644
--- a/client/src/views/admin/components/SearchInspecteur.vue
+++ b/client/src/views/admin/components/SearchInspecteur.vue
@@ -42,16 +42,7 @@ import { mapState } from 'vuex'
 import { FETCH_AUTOCOMPLETE_INSPECTEURS_REQUEST } from '@/store'
 import CandilibAutocomplete from './CandilibAutocomplete'
 import ProfileInfo from './ProfileInfo'
-import { transformToProfileInfo } from '@/util'
-
-const inspecteurProfileInfoDictionary = [
-  [
-    ['prenom', 'Prenom'],
-    ['nom', 'Nom'],
-    ['email', 'Email'],
-    ['departement', 'Département'],
-  ],
-]
+import { transformToProfileInfo, inspecteurProfileInfoDictionary } from '@/util'
 
 export default {
   components: {
diff --git a/client/src/views/admin/components/WeekMonitor.vue b/client/src/views/admin/components/WeekMonitor.vue
index 069d318a1..cd326519f 100644
--- a/client/src/views/admin/components/WeekMonitor.vue
+++ b/client/src/views/admin/components/WeekMonitor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="margin-top: -6em;">
+  <div>
     <h2 class="title">
       <strong>
         <span class="u-uppercase">
diff --git a/client/src/views/admin/components/schedule/ModalAddScheduleInspecteur.vue b/client/src/views/admin/components/schedule/ModalAddScheduleInspecteur.vue
new file mode 100644
index 000000000..3f4318ba2
--- /dev/null
+++ b/client/src/views/admin/components/schedule/ModalAddScheduleInspecteur.vue
@@ -0,0 +1,343 @@
+<template>
+  <v-dialog
+    v-model="dialog"
+    fullscreen
+    hide-overlay
+  >
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn
+        class="t-import-places"
+        color="primary"
+        dark
+        v-bind="attrs"
+        v-on="on"
+      >
+        Import Places
+      </v-btn>
+    </template>
+    <v-card>
+      <v-toolbar
+        color="#1E1E1E"
+      >
+        <v-toolbar-title>
+          <v-chip
+            color="white"
+            outlined
+          >
+            <strong class="text-2xl">
+              Planifier les inspecteurs
+            </strong>
+          </v-chip>
+        </v-toolbar-title>
+        <v-spacer />
+        <v-btn
+          class="mr-1 t-close-btn-import-places"
+          color="white"
+          outlined
+          icon
+          @click="dialog = false"
+        >
+          <v-icon>close</v-icon>
+        </v-btn>
+      </v-toolbar>
+      <v-card class="ma-2 pa-2">
+        <div class="flex flex-wrap align-center justify-center">
+          <v-card-title>
+            Planifier un seul inspecteur pour le Centre&nbsp;
+            <strong>{{ activeCentreInfos.nom }}</strong>&nbsp;
+            du département&nbsp;
+            <strong>{{ activeDepartement }}</strong>&nbsp;
+            le &nbsp;
+            <strong>
+              {{ formatedSelectedDate }}
+            </strong>&nbsp;:
+          </v-card-title>
+          <candilib-autocomplete
+            class="flex-1 col-8 t-modal-input-places-search-inspecteur"
+            label="Inspecteurs"
+            hint="Chercher un inspecteur par son nom / matricule / email"
+            placeholder="Dupond"
+            :items="inspecteursFullList"
+            item-text="nomPrenomMatricule"
+            item-value="_id"
+            :fetch-autocomplete-action="fetchAutocompleteAction"
+            @selection="displayInspecteurInfo"
+          />
+        </div>
+
+        <div :class="`${isIpcsrHasSelected ? '' : 'opacity-75'}`">
+          <div class="pa-5 flex flex-wrap align-center justify-center">
+            <v-btn
+              class="t-import-places-modal-btn-all"
+              :disabled="!isIpcsrHasSelected"
+              :outlined="isSelectAllSlots ? false : true"
+              :color="isSelectAllSlots ? 'primary' : colorDisabledButton"
+              @click="selectAllSlots()"
+            >
+              Tout sélectionner
+            </v-btn>
+            <v-btn
+              class="t-import-places-modal-btn-morning"
+              :disabled="!isIpcsrHasSelected"
+              :outlined="isSelectAllMorningSlots ? false : true"
+              :color="isSelectAllMorningSlots ? 'primary' : colorDisabledButton"
+              @click="selectAllMorningSlots()"
+            >
+              Sélectionner le matin
+            </v-btn>
+            <v-btn
+              class="t-import-places-modal-btn-afternoon"
+              :disabled="!isIpcsrHasSelected"
+              :outlined="isSelectAllAfternoonSlots ? false : true"
+              :color="isSelectAllAfternoonSlots ? 'primary' : colorDisabledButton"
+              @click="selectAllAfternoonSlots()"
+            >
+              Sélectionner l'après-midi
+            </v-btn>
+          </div>
+
+          <div class="flex flex-wrap align-center justify-center t-import-places-modal-checkbox-content">
+            <v-checkbox
+              v-for="(creneau, index) in creneauMorningAfternoonSetting.morning"
+              :key="creneau"
+              v-model="selectedCreneauForIPCSR"
+              :label="creneau"
+              :value="creneau"
+              color="primary"
+              :class="`check-box-style t-import-places-modal-checkbox-morning-${index}`"
+              :disabled="!isIpcsrHasSelected"
+            >
+              {{ creneau }}
+            </v-checkbox>
+            <v-checkbox
+              v-for="(creneau, index) in creneauMorningAfternoonSetting.afternoon"
+              :key="creneau"
+              v-model="selectedCreneauForIPCSR"
+              :label="creneau"
+              :value="creneau"
+              color="primary"
+              :class="`check-box-style t-import-places-modal-checkbox-afternoon-${index}`"
+              :disabled="!isIpcsrHasSelected"
+            >
+              {{ creneau }}
+            </v-checkbox>
+          </div>
+        </div>
+
+        <div
+          :class="`flex flex-wrap align-center justify-center pa-6 ${isIpcsrHasSelected ? '' : 'opacity-75'}`"
+        >
+          <v-btn
+            :disabled="!isIpcsrHasSelected"
+            rounded
+            class="flex-1 col-2"
+            color="error"
+            outlined
+            @click="dialog = false"
+          >
+            Annuler
+          </v-btn>
+          <v-btn
+            :disabled="!isIpcsrHasSelected || !selectedCreneauForIPCSR.length"
+            rounded
+            class="flex-1 col-2 t-import-places-modal-confirm-btn"
+            color="primary"
+            @click="addPlacesForOneIPCSR()"
+          >
+            Confirmer
+          </v-btn>
+        </div>
+      </v-card>
+
+      <v-card class="ma-2">
+        <v-card-title class="flex flex-wrap align-center justify-center">
+          <span>
+            Importation des places:
+          </span>
+        </v-card-title>
+        <div class="u-pr">
+          <big-loading-indicator :is-loading="isPlacesUpdating" />
+          <v-layout
+            wrap
+            class="u-flex--space-between  u-pr"
+          >
+            <admin-import-places class="import-places" />
+            <import-places-validation class="u-flex__item" />
+          </v-layout>
+        </div>
+      </v-card>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import { mapGetters, mapState } from 'vuex'
+import { CREATE_PLACES_REQUEST, FETCH_AUTOCOMPLETE_INSPECTEURS_REQUEST } from '@/store'
+import { creneauMorningAfternoonSetting, getFrenchLuxonFromSql } from '../../../../util'
+import CandilibAutocomplete from '../CandilibAutocomplete'
+import AdminImportPlaces from '../AdminImportPlaces'
+import ImportPlacesValidation from '../ImportPlacesValidation'
+import { BigLoadingIndicator } from '@/components'
+
+export default {
+  components: {
+    CandilibAutocomplete,
+    AdminImportPlaces,
+    ImportPlacesValidation,
+    BigLoadingIndicator,
+  },
+  props: {
+    activeCentreInfos: {
+      type: Object,
+      default: () => {},
+    },
+    selectedDate: {
+      type: String,
+      default: '',
+    },
+    reloadWeekMonitor: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  data () {
+    return {
+      colorDisabledButton: '#1E1E1E',
+      dialog: false,
+      notifications: false,
+      sound: true,
+      widgets: false,
+      fetchAutocompleteAction: FETCH_AUTOCOMPLETE_INSPECTEURS_REQUEST,
+      selectedCreneauForIPCSR: [],
+      isImportPlacesActive: false,
+      isSelectAllSlots: false,
+      isSelectAllMorningSlots: false,
+      isSelectAllAfternoonSlots: false,
+      currentSelectedInspecteur: { inspecteurInfos: {}, places: [] },
+      isIpcsrHasSelected: false,
+
+    }
+  },
+  computed: {
+    ...mapGetters(['activeDepartement']),
+    ...mapState({
+      isPlacesUpdating: state => state.importPlaces.isPlacesUpdating,
+
+      isFetching (state) {
+        const {
+          places,
+          inspecteurs,
+        } = state.admin
+        return places.isFetching ||
+          inspecteurs.isFetching ||
+          places.isDeletingBookedPlace ||
+          places.isDeletingAvailablePlace ||
+          places.isCreating || state.adminSearch.isFetching
+      },
+
+      inspecteursFullList (state) {
+        return state.adminSearch.inspecteurs.list.map(inspecteur => {
+          const { nom, prenom, matricule } = inspecteur
+          const nomPrenomMatricule = nom + '  ' + prenom + ' | ' + matricule
+          return { nomPrenomMatricule, ...inspecteur }
+        })
+      },
+    }),
+
+    beginDate () {
+      return getFrenchLuxonFromSql(this.selectedDate).startOf('day').toISO()
+    },
+
+    endDate () {
+      return getFrenchLuxonFromSql(this.selectedDate).endOf('day').toISO()
+    },
+
+    formatedSelectedDate () {
+      return this.selectedDate.split('-').reverse().join('/')
+    },
+  },
+
+  beforeMount () {
+    this.creneauMorningAfternoonSetting = creneauMorningAfternoonSetting
+  },
+
+  methods: {
+    displayInspecteurInfo (inspecteur) {
+      this.isIpcsrHasSelected = !!inspecteur
+      this.currentSelectedInspecteur.inspecteurInfos = inspecteur
+    },
+    selectAllSlots () {
+      const { morning, afternoon } = this.creneauMorningAfternoonSetting
+      this.isSelectAllSlots = !this.isSelectAllSlots
+      this.isSelectAllMorningSlots = false
+      this.isSelectAllAfternoonSlots = false
+
+      this.selectedCreneauForIPCSR = this.isSelectAllSlots ? [...morning, ...afternoon] : []
+    },
+
+    selectAllMorningSlots () {
+      const { morning } = this.creneauMorningAfternoonSetting
+
+      this.isSelectAllMorningSlots = !this.isSelectAllMorningSlots
+      this.isSelectAllAfternoonSlots = false
+      this.isSelectAllSlots = false
+      this.selectedCreneauForIPCSR = this.isSelectAllMorningSlots ? morning : []
+    },
+
+    selectAllAfternoonSlots () {
+      const { afternoon } = this.creneauMorningAfternoonSetting
+
+      this.isSelectAllAfternoonSlots = !this.isSelectAllAfternoonSlots
+      this.isSelectAllMorningSlots = false
+      this.isSelectAllSlots = false
+      this.selectedCreneauForIPCSR = this.isSelectAllAfternoonSlots ? afternoon : []
+    },
+
+    async addPlacesForOneIPCSR () {
+      this.currentSelectedInspecteur.places = this.selectedCreneauForIPCSR
+
+      const inspecteurPlacesSelection = {
+        centre: this.activeCentreInfos,
+        inspecteur: this.currentSelectedInspecteur.inspecteurInfos._id,
+        dates: this.currentSelectedInspecteur.places.map(crenau => {
+          const [year, month, day] = this.selectedDate.split('-')
+          const formatedDate = `${day}/${month}/${year} ${crenau.replace('h', ':')}`
+          return formatedDate
+        }),
+      }
+
+      await this.$store.dispatch(CREATE_PLACES_REQUEST, inspecteurPlacesSelection)
+      this.resetFormPlaceForOneIPCSR()
+      this.dialog = false
+      this.$emit('reload-week-monitor')
+    },
+
+    resetFormPlaceForOneIPCSR () {
+      this.currentSelectedInspecteur = { inspecteurInfos: this.currentSelectedInspecteur.inspecteurInfos, places: [] }
+      this.selectedCreneauForIPCSR = []
+      this.isSelectAllMorningSlots = false
+      this.isSelectAllAfternoonSlots = false
+      this.isSelectAllSlots = false
+    },
+  },
+}
+</script>
+
+<style lang="postcss" scoped>
+>>> .check-box-style {
+  margin: 0.4em;
+
+  & .v-input__slot {
+    display: flex;
+    flex-direction: column;
+
+    & > div {
+      order: 2;
+    }
+
+    & label {
+      order: 1;
+    }
+  }
+}
+</style>
diff --git a/client/src/views/admin/components/schedule/ScheduleInspector.vue b/client/src/views/admin/components/schedule/ScheduleInspector.vue
index a55752c37..34ae38358 100644
--- a/client/src/views/admin/components/schedule/ScheduleInspector.vue
+++ b/client/src/views/admin/components/schedule/ScheduleInspector.vue
@@ -80,12 +80,18 @@
     </div>
 
     <div>
-      <div class="u-flex  u-flex--center  u-flex--space-between">
+      <div class="flex flex-wrap u-flex--center">
         <h3>Centres d'examen</h3>
         <generate-inspecteur-bordereaux
           :date="date"
           :is-for-inspecteurs="true"
         />
+        <modal-add-schedule-inspecteur
+          :active-centre-infos="{_id: activeCentreId, nom: activeNomCentre, departement: activeDepartement}"
+          :selected-date="date"
+          @reload-week-monitor="reloadWeekMonitor"
+        />
+
         <generate-inspecteur-bordereaux
           :date="date"
           :is-for-inspecteurs="false"
@@ -251,11 +257,12 @@ import {
   RESET_CANDIDAT,
 } from '@/store'
 
+import { RefreshButton, BigLoadingIndicator } from '@/components'
 import DeleteScheduleInspector from './DeleteScheduleInspector'
 import GenerateInspecteurBordereaux from './GenerateInspecteurBordereaux'
 import ScheduleInspectorButton from './ScheduleInspectorButton'
 import ScheduleInspectorDetails from './ScheduleInspectorDetails'
-import { RefreshButton, BigLoadingIndicator } from '@/components'
+import ModalAddScheduleInspecteur from './ModalAddScheduleInspecteur'
 
 import {
   creneauSetting,
@@ -274,12 +281,13 @@ const numberOfCreneau = creneauSetting.length || 0
 
 export default {
   components: {
+    BigLoadingIndicator,
     DeleteScheduleInspector,
     GenerateInspecteurBordereaux,
     RefreshButton,
     ScheduleInspectorButton,
     ScheduleInspectorDetails,
-    BigLoadingIndicator,
+    ModalAddScheduleInspecteur,
   },
 
   data () {
@@ -301,6 +309,7 @@ export default {
       isParseInspecteursPlanningLoading: false,
       selectedPlaceInfo: undefined,
       lastActiveCenters: [],
+      selectedCreneau: [],
     }
   },
 
@@ -316,7 +325,7 @@ export default {
           inspecteurs.isFetching ||
           places.isDeletingBookedPlace ||
           places.isDeletingAvailablePlace ||
-          places.isCreating
+          places.isCreating || state.adminSearch.isFetching
       },
 
       currentWeekNumber () {
@@ -335,6 +344,13 @@ export default {
       inspecteurs (state) {
         return state.admin.inspecteurs.list
       },
+      inspecteursFullList (state) {
+        return state.adminSearch.inspecteurs.list.map(inspecteur => {
+          const { nom, prenom, matricule } = inspecteur
+          const nomPrenomMatricule = nom + '  ' + prenom + ' | ' + matricule
+          return { nomPrenomMatricule, ...inspecteur }
+        })
+      },
     }),
 
     beginDate () {
@@ -353,6 +369,10 @@ export default {
       return this.isFetching ||
         this.isComputing
     },
+    allInspecteurs: state => state.adminSearch.inspecteurs.list,
+    activeNomCentre () {
+      return this.placesByCentreList.find(el => el.centre._id === this.activeCentreId)?.centre?.nom
+    },
   },
 
   watch: {
@@ -398,6 +418,9 @@ export default {
     if (this.placesByCentreList && this.placesByCentreList.length) {
       const centerId = this.$route.params.center
       this.activeCentreId = centerId || this.firstCentreId
+      this.activeCentreInfos = {
+
+      }
       this.lastActiveCenters[this.activeDepartement] = this.activeCentreId
       this.reloadWeekMonitor()
     }
@@ -514,6 +537,8 @@ export default {
               return 0
             }),
           }
+        }).sort((item, itemToCompare) => {
+          return item.nom.localeCompare(itemToCompare.nom)
         })
       }
       if (!this.inspecteursData.length) {
@@ -564,6 +589,12 @@ export default {
     updateCenterInRoute () {
       this.$router.push({ params: { center: this.activeCentreId, date: this.date } })
     },
+
+    addOrRemoveCreneauInList (creneau) {
+      this.selectedCreneau = this.selectedCreneau.find(el => el === creneau)
+        ? this.selectedCreneau.filter(el => el !== creneau)
+        : this.selectedCreneau.concat(creneau)
+    },
   },
 }
 </script>
diff --git a/client/src/views/admin/components/schedule/ScheduleManager.vue b/client/src/views/admin/components/schedule/ScheduleManager.vue
index e82ec9c58..e26b36a40 100644
--- a/client/src/views/admin/components/schedule/ScheduleManager.vue
+++ b/client/src/views/admin/components/schedule/ScheduleManager.vue
@@ -1,25 +1,7 @@
 <template>
   <div>
-    <v-card class="t-import-places">
+    <v-card>
       <page-title title="Gestion planning" />
-
-      <v-switch
-        v-model="isImportPlacesActive"
-        :label="`Import places`"
-      />
-
-      <div class="u-pr">
-        <big-loading-indicator :is-loading="isPlacesUpdating" />
-
-        <v-layout
-          v-show="isImportPlacesActive"
-          wrap
-          class="u-flex--space-between  u-pr"
-        >
-          <admin-import-places class="import-places" />
-          <import-places-validation class="u-flex__item" />
-        </v-layout>
-      </div>
     </v-card>
     <schedule-inspector />
   </div>
@@ -28,17 +10,11 @@
 <script>
 import { mapState } from 'vuex'
 
-import AdminImportPlaces from '../AdminImportPlaces'
-import ImportPlacesValidation from '../ImportPlacesValidation'
 import ScheduleInspector from './ScheduleInspector'
-import { BigLoadingIndicator } from '@/components'
 
 export default {
   components: {
-    AdminImportPlaces,
-    ImportPlacesValidation,
     ScheduleInspector,
-    BigLoadingIndicator,
   },
 
   data () {
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
new file mode 100644
index 000000000..328a1fb09
--- /dev/null
+++ b/client/tailwind.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+  future: {
+    // removeDeprecatedGapUtilities: true,
+    // purgeLayersByDefault: true,
+  },
+  // purge: [],
+  purge: [
+    './public/**/*.html',
+    './src/**/*.vue',
+  ],
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+}
diff --git a/client/tests/e2e/specs/adminPlaces.js b/client/tests/e2e/specs/adminPlaces.js
index b126e489d..2cb639fad 100644
--- a/client/tests/e2e/specs/adminPlaces.js
+++ b/client/tests/e2e/specs/adminPlaces.js
@@ -25,8 +25,8 @@ describe('Places tests', () => {
     // Adds the places from the created planning file
     cy.contains('calendar_today')
       .click()
-    cy.get('.t-import-places [type=checkbox]')
-      .check({ force: true })
+    cy.get('.t-import-places')
+      .click()
     const filePath1 = '../../../' + Cypress.env('filePath') + '/planning.csv'
     const fileName1 = 'planning.csv'
     cy.fixture(filePath1).then(fileContent => {
@@ -38,6 +38,7 @@ describe('Places tests', () => {
       .click({ force: true })
     cy.get('.v-snack--active', { timeout: 10000 })
       .should('contain', 'Le fichier ' + fileName1 + ' a été traité pour le departement 75.')
+    cy.get('.t-close-btn-import-places').click()
     cy.adminDisconnection()
   })
 
diff --git a/client/tests/e2e/specs/adminPlanning.js b/client/tests/e2e/specs/adminPlanning.js
index 3c2bcbfbd..f70286e92 100644
--- a/client/tests/e2e/specs/adminPlanning.js
+++ b/client/tests/e2e/specs/adminPlanning.js
@@ -68,7 +68,9 @@ describe('Planning tests', () => {
         cy.contains('Rendre le créneau disponible')
           .click()
       })
-    cy.checkAndCloseSnackBar('a bien été créée')
+    cy.get('.v-snack--active')
+      .should('contain', 'La ou les places ont bien été créée(s).')
+    cy.get('.v-snack--active button').should('be.visible').click({ force: true })
     // Sends the mail for the inspectors
     cy.deleteAllMails()
     cy.get('button')
@@ -155,8 +157,8 @@ describe('Planning tests', () => {
         cy.contains('Rendre le créneau disponible')
           .click()
       })
-
-    cy.checkAndCloseSnackBar('a bien été créée.')
+    cy.get('.v-snack--active')
+      .should('contain', 'La ou les places ont bien été créée(s).')
   })
 })
 
@@ -227,15 +229,11 @@ describe('Planning tests without candidate', () => {
         cy.contains('Rendre le créneau disponible')
           .click()
       })
-
-    cy.checkAndCloseSnackBar('a bien été créée')
-    cy.get('.v-window-item').not('[style="display: none;"]')
-      .contains(Cypress.env('inspecteur'))
-      .parents('tbody')
-      .should('not.contain', 'block')
+    cy.get('.v-snack--active')
+      .should('contain', 'La ou les places ont bien été créée(s).')
   })
 
-  it('Tests the import of csv files in the planning', () => {
+  it.only('Tests the import of csv files in the planning', () => {
     cy.adminLogin()
     // Goes to where the places are
     cy.visit(Cypress.env('frontAdmin') + 'admin/gestion-planning/*/' + Cypress.env('placeDate'))
@@ -323,6 +321,8 @@ describe('Planning tests without candidate', () => {
       .should('not.contain', Cypress.env('inspecteur'))
     // Imports the places
     cy.addPlanning()
+    cy.get('.t-import-places').click()
+
     // Check message, when place is put in not available hours
     const getEtatValidPlanning = cy.get('.t-import-places-validation-header-status')
     getEtatValidPlanning.should('contain', 'Etat')
@@ -333,6 +333,9 @@ describe('Planning tests without candidate', () => {
     cy.get('[col-id=message]').should('contain', "La place n'est pas enregistrée. La place est en dehors de la plage horaire autorisée.")
     cy.get('[col-id=status]').should('contain', 'clear')
     cy.get('[col-id=status]').should('not.contain', 'done')
+
+    cy.get('.t-close-btn-import-places').click()
+
     // The inspector should be back
     cy.contains('replay')
       .click()
@@ -342,4 +345,116 @@ describe('Planning tests without candidate', () => {
     cy.get('.name-ipcsr-wrap')
       .should('contain', Cypress.env('inspecteur'))
   })
+
+  it('Tests add one inspecteur in the planning', () => {
+    cy.adminLogin()
+    cy.visit(Cypress.env('frontAdmin') + 'admin/gestion-planning')
+
+    cy.get('.t-import-places').click()
+    cy.get('.t-modal-input-places-search-inspecteur').type('dupond')
+    cy.contains('01020301').click()
+
+    cy.get('.t-import-places-modal-btn-all').click()
+    morningBeChecked()
+    afternoonBeChecked()
+    cy.get('.t-import-places-modal-btn-all').click()
+    morningNotBeChecked()
+    afternoonNotBeChecked()
+
+    cy.get('.t-import-places-modal-btn-morning').click()
+    morningBeChecked()
+    afternoonNotBeChecked()
+    cy.get('.t-import-places-modal-btn-morning').click()
+    morningNotBeChecked()
+    afternoonNotBeChecked()
+
+    cy.get('.t-import-places-modal-btn-afternoon').click()
+
+    cy.get('.t-import-places-modal-confirm-btn').click()
+    cy.get('.v-snack--active').should('contain', 'La ou les places ont bien été créée(s).')
+    cy.get('.v-snack--active button').should('be.visible').click({ force: true })
+    cy.get('tbody > :nth-child(1) > :nth-child(12)').contains('check_circle')
+    cy.get('tbody > :nth-child(1) > :nth-child(13)').contains('check_circle')
+    cy.get('tbody > :nth-child(1) > :nth-child(14)').contains('check_circle')
+    cy.get('tbody > :nth-child(1) > :nth-child(15)').contains('check_circle')
+
+    cy.get('.t-import-places').click()
+    cy.get('.t-import-places-modal-btn-afternoon').click()
+    cy.get('.t-import-places-modal-confirm-btn').click()
+    cy.get('.v-snack--active').should('contain', 'Place déjà enregistrée en base')
+    cy.get('.v-snack--active button').should('be.visible').click({ force: true })
+
+    cy.contains('ROSNY SOUS BOIS').click()
+    cy.get('.t-import-places').click()
+    cy.get('.t-import-places-modal-btn-afternoon').click()
+    cy.get('.t-import-places-modal-confirm-btn').click()
+    cy.contains('NOISY LE GRAND').click()
+
+    cy.get('.v-snack__content').should('contain', "l'inspecteur est déjà sur un autre centre pour ce créneau")
+    cy.get('.v-snack--active button').should('be.visible').click({ force: true })
+
+    cy.get('.v-window-item').not('[style="display: none;"]')
+      .contains('DUPOND')
+      .parents('tr')
+      .within(($row) => {
+        cy.contains('delete')
+          .click()
+      })
+    cy.get('.v-window-item').not('[style="display: none;"]')
+      .should('have.length', 1, { timeout: 500 })
+      .and('contain', 'DUPOND') // To ensure retry-ability
+      .contains('DUPOND')
+      .parents('tbody').within(($row) => {
+        cy.get('tr').eq(1).within(($inTr) => {
+          cy.get('td').eq(1).within(($inTd) => {
+            cy.get('button').eq(0).should('contain', 'Supprimer la journée').click().wait(500)
+          })
+        })
+      })
+    cy.get('.u-full-width > div > .v-btn--contained').click()
+  })
 })
+
+const morningBeChecked = () => {
+  cy.get('[type="checkbox"]').eq(0).should('be.checked')
+  cy.get('[type="checkbox"]').eq(1).should('be.checked')
+  cy.get('[type="checkbox"]').eq(2).should('be.checked')
+  cy.get('[type="checkbox"]').eq(3).should('be.checked')
+  cy.get('[type="checkbox"]').eq(4).should('be.checked')
+  cy.get('[type="checkbox"]').eq(5).should('be.checked')
+  cy.get('[type="checkbox"]').eq(6).should('be.checked')
+  cy.get('[type="checkbox"]').eq(7).should('be.checked')
+  cy.get('[type="checkbox"]').eq(8).should('be.checked')
+  cy.get('[type="checkbox"]').eq(9).should('be.checked')
+}
+
+const afternoonBeChecked = () => {
+  cy.get('[type="checkbox"]').eq(10).should('be.checked')
+  cy.get('[type="checkbox"]').eq(11).should('be.checked')
+  cy.get('[type="checkbox"]').eq(12).should('be.checked')
+  cy.get('[type="checkbox"]').eq(13).should('be.checked')
+  cy.get('[type="checkbox"]').eq(14).should('be.checked')
+  cy.get('[type="checkbox"]').eq(15).should('be.checked')
+}
+
+const morningNotBeChecked = () => {
+  cy.get('[type="checkbox"]').eq(0).should('not.be.visible')
+  cy.get('[type="checkbox"]').eq(1).should('not.be.visible')
+  cy.get('[type="checkbox"]').eq(2).should('not.be.visible')
+  cy.get('[type="checkbox"]').eq(3).should('not.be.visible')
+  cy.get('[type="checkbox"]').eq(4).should('not.be.visible')
+  cy.get('[type="checkbox"]').eq(5).should('not.be.visible')
+  cy.get('[type="checkbox"]').eq(6).should('not.be.visible')
+  cy.get('[type="checkbox"]').eq(7).should('not.be.visible')
+  cy.get('[type="checkbox"]').eq(8).should('not.be.visible')
+  cy.get('[type="checkbox"]').eq(9).should('not.be.visible')
+}
+
+const afternoonNotBeChecked = () => {
+  cy.get('[type="checkbox"]').eq(10).should('not.be.visible')
+  cy.get('[type="checkbox"]').eq(11).should('not.be.visible')
+  cy.get('[type="checkbox"]').eq(12).should('not.be.visible')
+  cy.get('[type="checkbox"]').eq(13).should('not.be.visible')
+  cy.get('[type="checkbox"]').eq(14).should('not.be.visible')
+  cy.get('[type="checkbox"]').eq(15).should('not.be.visible')
+}
diff --git a/client/tests/e2e/specs/interactions.js b/client/tests/e2e/specs/interactions.js
index 62716b91e..7501467ed 100644
--- a/client/tests/e2e/specs/interactions.js
+++ b/client/tests/e2e/specs/interactions.js
@@ -127,7 +127,7 @@ describe('Standard scenarios', () => {
             })
         })
       cy.get('.v-snack--active')
-        .should('contain', 'a bien été créée.')
+        .should('contain', 'ont bien été créée(s).')
       // The candidate doesn't have the reservation anymore
       cy.visit(magicLink)
       cy.get('h2')
diff --git a/client/tests/e2e/support/commands.js b/client/tests/e2e/support/commands.js
index 9677a3eba..6db695400 100644
--- a/client/tests/e2e/support/commands.js
+++ b/client/tests/e2e/support/commands.js
@@ -130,8 +130,8 @@ Cypress.Commands.add('addPlanning', (dates, fileNameTmp = 'planning.csv') => {
   // Adds the places from the created planning file
   cy.contains('calendar_today')
     .click()
-  cy.get('.t-import-places [type=checkbox]')
-    .check({ force: true })
+  cy.get('.t-import-places')
+    .click()
   cy.fixture(filePath1).then(fileContent => {
     cy.get('[type=file]').attachFile({ fileContent, fileName: fileName1, mimeType: 'text/csv' })
   })
@@ -142,7 +142,7 @@ Cypress.Commands.add('addPlanning', (dates, fileNameTmp = 'planning.csv') => {
     .click({ force: true })
   cy.get('.v-snack--active', { timeout: 10000 })
     .should('contain', 'Le fichier ' + fileName1 + ' a été traité pour le departement 75.')
-
+  cy.get('.t-close-btn-import-places').click()
   return cy.wrap(
     { avalaiblePlaces: ((horaireMorning.length + horaireAfterNoon.length) * 2) * datePlaces.length },
   )
diff --git a/server/src/initDB/initDB.js b/server/src/initDB/initDB.js
index 002290362..8d23a8771 100644
--- a/server/src/initDB/initDB.js
+++ b/server/src/initDB/initDB.js
@@ -1,8 +1,20 @@
+/**
+ * Fonctionnalités pour initaliser la base de données
+ * @module
+ */
 import { findStatusByType } from '../models/status'
 import ModelPlace from '../models/place/place.model'
 import { techLogger } from '../util'
-
+/**
+ * Version de la base de données
+ */
 let versionDB = 0
+
+/**
+ * Pour initialisés la base de données
+ * - Met à jour les indexes de la collection places
+ * @function
+ */
 export const initDB = async () => {
   const statusVersion = await findStatusByType({ type: 'DB_VERSION' })
   const loggerInfo = {
@@ -18,6 +30,11 @@ export const initDB = async () => {
   ModelPlace.syncIndexes()
 }
 
+/**
+ * Pour mettre à jours des données de la base de données
+ * A utiliser sur des données non modifiable par l'application
+ * @function
+ */
 export const updateDB = async () => {
   // const loggerInfo = {
   //   section: 'updateDB',
diff --git a/server/src/initDB/update-visibleAt.js b/server/src/initDB/update-visibleAt.js
index 88f0d824f..6558537f7 100644
--- a/server/src/initDB/update-visibleAt.js
+++ b/server/src/initDB/update-visibleAt.js
@@ -2,6 +2,10 @@ import Place from '../models/place/place.model'
 import { getFrenchLuxon } from '../util'
 import { getDateVisibleForPlaces } from '../routes/candidat/util/date-to-display'
 
+/**
+ * Mise à jours de la visibilité des places
+ * @function
+ */
 export const updateVisibleAt = async () => {
   const now = getFrenchLuxon()
   const nowAt12 = getDateVisibleForPlaces()
diff --git a/server/src/models/__tests__/inspecteurs.js b/server/src/models/__tests__/inspecteurs.js
index acc595b9d..10572dca3 100644
--- a/server/src/models/__tests__/inspecteurs.js
+++ b/server/src/models/__tests__/inspecteurs.js
@@ -15,6 +15,13 @@ export const inspecteursTests = [
     email: 'dana.scully@x-files.com',
     departement: '93',
   },
+  {
+    nom: 'Scully01',
+    prenom: 'Dana01',
+    matricule: '033161301',
+    email: 'dana.scully01@x-files.com',
+    departement: '93',
+  },
 ]
 
 let inspecteurs
diff --git a/server/src/routes/admin/admin.controllers.js b/server/src/routes/admin/admin-controllers.js
similarity index 97%
rename from server/src/routes/admin/admin.controllers.js
rename to server/src/routes/admin/admin-controllers.js
index b894a4c69..9d862ae35 100644
--- a/server/src/routes/admin/admin.controllers.js
+++ b/server/src/routes/admin/admin-controllers.js
@@ -1,6 +1,6 @@
 /**
  * Contrôleur regroupant les fonctions de récupération des infos admin
- * @module routes/admin/admin-controllers
+ * @module
  */
 import { findUserById } from '../../models/user'
 import { findDepartementById } from '../../models/departement'
@@ -34,10 +34,10 @@ export const getMe = async (req, res) => {
     action: 'get-me',
     admin: req.userId,
   }
-  appLogger.info(loggerInfo)
   try {
     const infoAdmin = await findInfoAdminById(req.userId)
     if (infoAdmin) {
+      appLogger.info({ ...loggerInfo, description: 'Utilisateur trouvé' })
       return res.json(infoAdmin)
     }
     appLogger.warn({
@@ -111,8 +111,6 @@ export const createUserController = async (req, res) => {
     status,
   }
 
-  appLogger.info(loggerInfo)
-
   try {
     const user = await createAppropriateUser(
       req.userId,
@@ -172,8 +170,6 @@ export const getUsers = async (req, res) => {
     isArchivedOnly,
   }
 
-  appLogger.info(loggerInfo)
-
   try {
     const users = isArchivedOnly === 'true' ? await getArchivedUsersByAdmin(userId) : await getAppropriateUsers(userId)
 
@@ -224,8 +220,6 @@ export const updatedInfoUser = async (req, res) => {
     isUnArchive,
   }
 
-  // appLogger.info(loggerInfo)
-
   try {
     let updatedUser
     let message = ''
@@ -288,8 +282,6 @@ export const archiveUserController = async (req, res) => {
     emailToDelete,
   }
 
-  appLogger.info(loggerInfo)
-
   try {
     const archivedUser = await archiveUserBusiness(req.userId, emailToDelete)
 
diff --git a/server/src/routes/admin/admin.controllers.spec.js b/server/src/routes/admin/admin.controllers.spec.js
index 389c6948f..59958d61d 100644
--- a/server/src/routes/admin/admin.controllers.spec.js
+++ b/server/src/routes/admin/admin.controllers.spec.js
@@ -9,7 +9,7 @@ import {
   updatedInfoUser,
   createUserController,
   getUsers,
-} from './admin.controllers'
+} from './admin-controllers'
 import { createUser } from '../../models/user'
 import config from '../../config'
 import {
diff --git a/server/src/routes/admin/candidats.controllers.js b/server/src/routes/admin/candidats-controllers.js
similarity index 96%
rename from server/src/routes/admin/candidats.controllers.js
rename to server/src/routes/admin/candidats-controllers.js
index 4c2b1b388..353e4cb71 100644
--- a/server/src/routes/admin/candidats.controllers.js
+++ b/server/src/routes/admin/candidats-controllers.js
@@ -1,6 +1,6 @@
 /**
  * Contrôleur regroupant les fonctions candidats à l'attention des répartiteurs
- * @module routes/admin/candidats-controllers
+ * @module
  */
 import { appLogger } from '../../util/logger'
 import {
@@ -53,7 +53,6 @@ export const importCandidats = async (req, res) => {
 
   try {
     loggerInfo.filename = jsonFile.name
-    appLogger.info({ ...loggerInfo })
 
     // Next line is use to catch error when jsonFile.data not have the good format
     JSON.parse(jsonFile.data.toString())
@@ -92,14 +91,16 @@ export const importCandidats = async (req, res) => {
  * @param {import('express').Response} res
  */
 export const exportCandidats = async (req, res) => {
+  const candidatsAsCsv = await getCandidatsAsCsv(req.candidats)
+  const filename = 'candidatsLibresPrintel.csv'
+
   appLogger.info({
     section: 'admin-export-cvs',
     action: 'candidats',
     admin: req.userId,
+    description: `fichier ${filename} envoyé`,
   })
 
-  const candidatsAsCsv = await getCandidatsAsCsv(req.candidats)
-  const filename = 'candidatsLibresPrintel.csv'
   res
     .status(200)
     .attachment(filename)
@@ -117,14 +118,16 @@ export const exportCandidats = async (req, res) => {
  * @param {import('express').Response} res
  */
 export const exportBookedCandidats = async (req, res) => {
+  const candidatsAsCsv = await getBookedCandidatsAsCsv(req.candidats)
+  const filename = 'candidatsLibresReserve.csv'
+
   appLogger.info({
     section: 'admin-export-cvs',
     action: 'booked-candidats',
     admin: req.userId,
+    description: `fichier ${filename} envoyé`,
   })
 
-  const candidatsAsCsv = await getBookedCandidatsAsCsv(req.candidats)
-  const filename = 'candidatsLibresReserve.csv'
   res
     .status(200)
     .attachment(filename)
@@ -161,7 +164,6 @@ export const getCandidats = async (req, res) => {
     if (candidatId) {
       loggerInfo.action = 'INFO-CANDIDAT'
       loggerInfo.candidatId = candidatId
-      appLogger.info(loggerInfo)
 
       const populate = {
         'places.centre': true,
@@ -186,6 +188,7 @@ export const getCandidats = async (req, res) => {
               archiveReason: humanReadableReason,
             }
           })
+        appLogger.info({ ...loggerInfo, description: 'Candidiat trouvé' + placeFound ? 'avec une réservztion' : '' })
         res.json({
           success: true,
           candidat: { ...candidat, place: placeFound },
@@ -214,7 +217,6 @@ export const getCandidats = async (req, res) => {
       loggerInfo.matching = matching
       loggerInfo.startingWith = startingWith
       loggerInfo.endingWith = endingWith
-      appLogger.info(loggerInfo)
 
       const result = await findCandidatsMatching(
         matching,
@@ -222,6 +224,7 @@ export const getCandidats = async (req, res) => {
         endingWith,
       )
 
+      appLogger.info({ ...loggerInfo, description: result?.candidats?.length + ' candidats trouvés' })
       res.json(result.candidats)
       return
     }
@@ -234,7 +237,7 @@ export const getCandidats = async (req, res) => {
     appLogger.info(loggerInfo)
 
     const candidatsLean = await findAllCandidatsLean()
-    appLogger.debug({ ...loggerInfo, candidatsLean })
+    // appLogger.debug({ ...loggerInfo, candidatsLean })
     let candidats
     if (actionAsk === 'aurige') {
       candidats = candidatsLean
diff --git a/server/src/routes/admin/index.js b/server/src/routes/admin/index.js
index 7dcd12397..d11554696 100644
--- a/server/src/routes/admin/index.js
+++ b/server/src/routes/admin/index.js
@@ -5,14 +5,14 @@
 
 import express from 'express'
 
-import { getCandidats, importCandidats, updateCandidats } from './candidats.controllers'
+import { getCandidats, importCandidats, updateCandidats } from './candidats-controllers'
 import {
   createUserController,
   archiveUserController,
   getMe,
   getUsers,
   updatedInfoUser,
-} from './admin.controllers'
+} from './admin-controllers'
 import {
   createIpcsr,
   getInspecteurs,
diff --git a/server/src/routes/admin/middlewares/verify-repartiteur-departement.js b/server/src/routes/admin/middlewares/verify-repartiteur-departement.js
index 50fbbcad1..987c3e6d5 100644
--- a/server/src/routes/admin/middlewares/verify-repartiteur-departement.js
+++ b/server/src/routes/admin/middlewares/verify-repartiteur-departement.js
@@ -34,6 +34,7 @@ export async function verifyRepartiteurDepartement (req, res, next) {
     departement,
     departements,
   }
+
   try {
     if (departements && departements.includes(departement)) {
       return next()
@@ -53,6 +54,7 @@ export async function verifyRepartiteurDepartement (req, res, next) {
       error,
     })
   }
+
   return res.status(401).send({
     isTokenValid: false,
     message: ACCESS_FORBIDDEN,
diff --git a/server/src/routes/admin/places-business.js b/server/src/routes/admin/places-business.js
index fcf6fd154..8499fb729 100644
--- a/server/src/routes/admin/places-business.js
+++ b/server/src/routes/admin/places-business.js
@@ -567,23 +567,34 @@ export const createPlaceForInspector = async (centre, inspecteur, date) => {
       'Place enregistrée en base',
     )
   } catch (error) {
-    let message = error.message
     if (error.message === PLACE_ALREADY_IN_DB_ERROR) {
-      const description = `Place [${myDate}] déjà enregistrée en base`
       appLogger.warn({
         ...loggerInfo,
-        description,
-        error,
-      })
-      message = description
-    } else {
-      appLogger.error({
-        ...loggerInfo,
-        description: error.message,
+        description: 'Place déjà enregistrée en base',
         error,
       })
+      return getPlaceStatus(
+        centre.departement,
+        centre.nom,
+        inspecteur,
+        myDate,
+        'error',
+        'Place déjà enregistrée en base',
+      )
     }
-    throw new Error(message)
+    appLogger.error({
+      ...loggerInfo,
+      description: error.message,
+      error,
+    })
+    return getPlaceStatus(
+      centre.departement,
+      centre.nom,
+      inspecteur,
+      date,
+      'error',
+      error.message,
+    )
   }
 }
 
diff --git a/server/src/routes/admin/places-controllers.js b/server/src/routes/admin/places-controllers.js
index 16b07598c..211d3d370 100644
--- a/server/src/routes/admin/places-controllers.js
+++ b/server/src/routes/admin/places-controllers.js
@@ -171,41 +171,59 @@ export const getPlaces = async (req, res) => {
   }
 }
 
+function createPlacesByAdmin ({ centre, inspecteur, date, dates }) {
+  if (dates) {
+    return Promise.all(dates.map(currentDate => createPlaceForInspector(centre, inspecteur, currentDate)))
+  }
+  return createPlaceForInspector(
+    centre,
+    inspecteur,
+    date,
+  )
+}
+
 export const createPlaceByAdmin = async (req, res) => {
-  const { centre, inspecteur, date } = req.body
+  const { centre, inspecteur, date, dates } = req.body
   const loggerInfo = {
     section: 'admin-create-place',
     admin: req.userId,
     centreId: centre._id,
     inspecteur,
     dateStr: date,
+    isMultiDates: !!dates,
   }
   try {
-    const createdPlaceResult = await createPlaceForInspector(
-      centre,
-      inspecteur,
-      date,
-    )
+    const createdPlacesResult = await createPlacesByAdmin({ centre, inspecteur, date, dates })
+    if (createdPlacesResult instanceof Array) {
+      const hasError = createdPlacesResult.find(({ status }) => status === 'error')
+      if (hasError) {
+        throw new ErrorWithStatus(400, hasError.message)
+      }
+      loggerInfo.countNumberCreatedPlaces = createdPlacesResult.length
+    }
+
+    loggerInfo.countNumberCreatedPlaces = 1
+
     appLogger.info({
       ...loggerInfo,
-      action: 'created-place',
-      description: 'create by admin place: La place a bien été créée.',
+      action: 'created-place(s)',
+      description: 'create by admin place : La ou les place(s) ont bien été créée(s).',
     })
     res.json({
       success: true,
-      message: `La place du [${createdPlaceResult.date}] a bien été créée.`,
+      message: 'La ou les places ont bien été créée(s).',
     })
   } catch (error) {
     appLogger.error({
       ...loggerInfo,
       action: 'error',
-      description: "create by admin place: La place n'a pas été créée.",
+      description: "create by admin place : Une ou plusieurs place(s) n'ont pas été créée(s).",
       error,
     })
     res.json({
       success: false,
-      message: "La place n'a pas été créée",
-      error: error.nessage,
+      message: "Une ou plusieurs places n'ont pas été créée(s).",
+      error: error.message,
     })
   }
 }
diff --git a/server/src/routes/admin/places-controllers.spec.js b/server/src/routes/admin/places-controllers.spec.js
index d1972e463..4be570e6b 100644
--- a/server/src/routes/admin/places-controllers.spec.js
+++ b/server/src/routes/admin/places-controllers.spec.js
@@ -8,6 +8,7 @@ import centreModel from '../../models/centre/centre-model'
 import { createInspecteur } from '../../models/inspecteur'
 import { createPlace, findPlaceById } from '../../models/place'
 import placeModel from '../../models/place/place.model'
+import inspecteurModel from '../../models/inspecteur/inspecteur-model'
 import { createUser } from '../../models/user'
 import { createCentre } from '../../models/centre/centre-queries'
 
@@ -40,6 +41,7 @@ import {
   getFrenchLuxonFromObject,
 } from '../../util'
 import {
+  createPlaceByAdmin,
   deletePlacesByAdmin,
   getPlaces,
   sendScheduleInspecteurs,
@@ -850,3 +852,137 @@ describe('Send bordereaux', () => {
     await place.remove()
   })
 })
+
+describe('Admin create places for one inspecteur', () => {
+  const datesTest01 = getFrenchLuxonFromObject({ day: 19, hour: 9 }).toFormat("dd/LL/yyyy HH':'mm")
+  const datesTest02 = getFrenchLuxonFromObject({ day: 19, hour: 9, minutes: 30 }).toFormat("dd/LL/yyyy HH':'mm")
+  const datesTest03 = getFrenchLuxonFromObject({ day: 19, hour: 10 }).toFormat("dd/LL/yyyy HH':'mm")
+  let inspecteur
+  let centre
+  const app = express()
+  app.use(bodyParser.json({ limit: '20mb' }))
+  app.use(bodyParser.urlencoded({ limit: '20mb', extended: false }))
+
+  beforeAll(async () => {
+    await connect()
+    setInitCreatedCentre()
+    resetCreatedInspecteurs()
+    inspecteur = await createInspecteurs()
+    centre = await createCentres()
+
+    const user = await createUser(
+      admin.email,
+      admin.password,
+      admin.departements,
+      admin.status,
+    )
+
+    app.use((req, res, next) => {
+      req.userId = user._id
+      next()
+    })
+    app.post(`${apiPrefix}/admin/places`, createPlaceByAdmin)
+    // if next-line is set as true, this display logger info in console
+    require('../../util/logger').setWithConsole(false)
+  })
+
+  afterAll(async () => {
+    await disconnect()
+  })
+
+  it('should return a 200 when IPCSR places has created', async () => {
+    // Given
+
+    const { body } = await request(app)
+      .post(`${apiPrefix}/admin/places`)
+      .send({
+        centre: centre[0],
+        inspecteur: inspecteur[0]._id,
+        dates: [
+          datesTest01,
+          datesTest02,
+          datesTest03,
+        ],
+      })
+      // Then
+      .expect(200)
+    expect(body).toHaveProperty('success', true)
+    expect(body).toHaveProperty('message', 'La ou les places ont bien été créée(s).')
+
+    await placeModel.deleteMany({})
+    await centreModel.deleteMany({})
+    await inspecteurModel.deleteMany({})
+  })
+
+  it('should return a 200 when IPCSR places already created with error message', async () => {
+    // Given
+    await request(app)
+      .post(`${apiPrefix}/admin/places`)
+      .send({
+        centre: centre[1],
+        inspecteur: inspecteur[1]._id,
+        dates: [
+          datesTest01,
+          datesTest02,
+          datesTest03,
+        ],
+      })
+    const { body } = await request(app)
+      .post(`${apiPrefix}/admin/places`)
+      .send({
+        centre: centre[1],
+        inspecteur: inspecteur[1]._id,
+        dates: [
+          datesTest01,
+          datesTest02,
+          datesTest03,
+        ],
+      })
+      // Then
+      .expect(200)
+
+    expect(body).toHaveProperty('success', false)
+    expect(body).toHaveProperty('message', "Une ou plusieurs places n'ont pas été créée(s).")
+    expect(body).toHaveProperty('error', 'Place déjà enregistrée en base')
+
+    await placeModel.deleteMany({})
+    await centreModel.deleteMany({})
+    await inspecteurModel.deleteMany({})
+  })
+
+  it('should return a 200 when IPCSR already on a other center', async () => {
+    // Given
+
+    await request(app)
+      .post(`${apiPrefix}/admin/places`)
+      .send({
+        centre: centre[1],
+        inspecteur: inspecteur[2]._id,
+        dates: [
+          datesTest01,
+          datesTest02,
+          datesTest03,
+        ],
+      })
+    const { body } = await request(app)
+      .post(`${apiPrefix}/admin/places`)
+      .send({
+        centre: centre[2],
+        inspecteur: inspecteur[2]._id,
+        dates: [
+          datesTest01,
+          datesTest02,
+          datesTest03,
+        ],
+      })
+      // Then
+      .expect(200)
+    expect(body).toHaveProperty('success', false)
+    expect(body).toHaveProperty('message', "Une ou plusieurs places n'ont pas été créée(s).")
+    expect(body).toHaveProperty('error', "l'inspecteur est déjà sur un autre centre pour ce créneau")
+
+    await placeModel.deleteMany({})
+    await centreModel.deleteMany({})
+    await inspecteurModel.deleteMany({})
+  })
+})