diff --git a/package-lock.json b/package-lock.json
index f818000..ca160cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,8 +21,10 @@
         "countries-list": "^2.3.1",
         "country-list": "^1.1.0",
         "dotenv": "^8.2.0",
+        "html2canvas": "^1.4.1",
         "jquery": "^3.6.1",
         "js-cookie": "^3.0.1",
+        "jspdf": "^3.0.0",
         "markdown": "^0.5.0",
         "popper.js": "^1.16.1",
         "sweetalert2": "^6.10.3",
@@ -1797,12 +1799,12 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz",
-      "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==",
-      "dev": true,
+      "version": "7.26.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.9.tgz",
+      "integrity": "sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==",
+      "license": "MIT",
       "dependencies": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1968,6 +1970,7 @@
       "version": "6.7.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
       "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+      "license": "MIT",
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "6.7.2"
       },
@@ -1979,6 +1982,7 @@
       "version": "6.7.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
       "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -1987,6 +1991,7 @@
       "version": "6.7.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
       "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+      "license": "(CC-BY-4.0 AND MIT)",
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "6.7.2"
       },
@@ -1998,6 +2003,7 @@
       "version": "6.7.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
       "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -2456,6 +2462,13 @@
       "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
       "dev": true
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/range-parser": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
@@ -2502,6 +2515,13 @@
       "integrity": "sha512-AZU7vQcy/4WFEuwnwsNsJnFwupIpbllH1++LXScN6uxT1Z4zPzdrWG97w4/I7eFKFTvfy/bHFStWjdBAg2Vjug==",
       "dev": true
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -3033,6 +3053,18 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.12",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.12.tgz",
@@ -3225,6 +3257,15 @@
       "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
       "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs= sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA=="
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.2.1.tgz",
@@ -3477,6 +3518,18 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/buffer": {
       "version": "4.9.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
@@ -3607,6 +3660,33 @@
         }
       ]
     },
+    "node_modules/canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/canvg/node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -4120,6 +4200,18 @@
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw= sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "dev": true
     },
+    "node_modules/core-js": {
+      "version": "3.40.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.40.0.tgz",
+      "integrity": "sha512-7vsMc/Lty6AGnn7uFpYT56QesI5D2Y/UkgKounk87OP9Z2H9Z8kj6jzcSGAxFmUtDOS0ntK6lbQz+Nsa0Jj6mQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.25.3",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.25.3.tgz",
@@ -4271,6 +4363,15 @@
         "postcss": "^8.0.9"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-7.1.2.tgz",
@@ -4754,6 +4855,16 @@
         "domelementtype": "1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.4.tgz",
+      "integrity": "sha512-ysFSFEDVduQpyhzAob/kkuJjf5zWkZD8/A9ywSp1byueyuCfHamrCBa14/Oc2iiB0e51B+NpxSl5gmzn+Ms/mg==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/domutils": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.6.2.tgz",
@@ -5483,6 +5594,12 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/figures": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
@@ -6201,6 +6318,19 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "3.9.2",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.9.2.tgz",
@@ -6950,6 +7080,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/jspdf": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.0.tgz",
+      "integrity": "sha512-QvuQZvOI8CjfjVgtajdL0ihrDYif1cN5gXiF9lb9Pd9JOpmocvnNyFO9sdiJ/8RA5Bu8zyGOUjJLj5kiku16ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.2.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/junk": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/junk/-/junk-3.1.0.tgz",
@@ -8126,6 +8274,13 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
@@ -8920,6 +9075,16 @@
         }
       ]
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -9032,10 +9197,10 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.0",
@@ -9255,6 +9420,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rimraf": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
@@ -9856,6 +10031,16 @@
       "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility",
       "dev": true
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -10015,6 +10200,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/svgo": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
@@ -10233,6 +10428,15 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -10515,6 +10719,15 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
diff --git a/package.json b/package.json
index 4ce1f77..0e4ee64 100644
--- a/package.json
+++ b/package.json
@@ -27,8 +27,10 @@
     "countries-list": "^2.3.1",
     "country-list": "^1.1.0",
     "dotenv": "^8.2.0",
+    "html2canvas": "^1.4.1",
     "jquery": "^3.6.1",
     "js-cookie": "^3.0.1",
+    "jspdf": "^3.0.0",
     "markdown": "^0.5.0",
     "popper.js": "^1.16.1",
     "sweetalert2": "^6.10.3",
diff --git a/resources/assets/js/pages/content/whatnow-old.vue b/resources/assets/js/pages/content/whatnow-old.vue
new file mode 100644
index 0000000..27e4e16
--- /dev/null
+++ b/resources/assets/js/pages/content/whatnow-old.vue
@@ -0,0 +1,1392 @@
+  <template>
+    <b-container fluid>
+      <page-banner>
+        <b-col sm="auto" md="4">
+          <h1>{{ $t('content.whatnow.whatnow') }} {{ currentRegionName && `- ${currentRegionName}` }}</h1>
+        </b-col>
+        <b-col sm="auto" md="8">
+          <div class="d-flex justify-content-end u-gap-24 flex-wrap">
+            <selectSociety v-model="selectedSoc" :societyList="filteredSocieties" :countryCode="countryCode">
+            </selectSociety>
+            <selectRegion v-model="selectedRegion" :socCode="selectedSoc.countryCode"
+              :translationCode="selectedLanguage"></selectRegion>
+          </div>
+        </b-col>
+      </page-banner>
+
+      <b-row :class="`pb-0 pl-4 pr-4 whatnow-language-picker text-light ${selectingLanguage ? 'pt-2 pb-2' : 'pb-0'}`"
+        v-if="selectedSoc">
+        <b-col>
+          <b-input-group v-if="selectingLanguage">
+            <b-form-select v-model="languageToAdd" :options="filteredLanguages" />
+            <div class="input-group-append">
+              <b-button class="h-100 btn-small-radius" variant="dark" @click="addNewLanguage">
+                <fa :icon="['fas', 'plus']" />
+              </b-button>
+              <b-button class="h-100 btn-small-radius" variant="outline-danger" @click="selectingLanguage = false">
+                <fa :icon="['fas', 'times']" />
+              </b-button>
+            </div>
+          </b-input-group>
+          <b-nav tabs v-else>
+            <b-nav-item v-for="lang in currentLanguages" :key="lang" @click="selectedLanguage = lang"
+              :active="selectedLanguage === lang">
+              <div class="nav-link-wrapper text-center h-100">
+                {{ lang | uppercase }} <br />
+                <small v-if="languages[lang]">{{ truncate(languages[lang].name, 8) }}</small>
+              </div>
+            </b-nav-item>
+            <b-nav-item v-b-tooltip.hover :title="selectingLanguage ? null : $t('content.whatnow.add_language')"
+              @click="selectingLanguage = true" v-if="can(user, permissions.CONTENT_CREATE)">
+              <fa class="mt-2" :icon="['fas', 'plus']" />
+            </b-nav-item>
+          </b-nav>
+        </b-col>
+      </b-row>
+
+      <b-row class="pl-4 pr-4 pb-3 pt-3 whatnow-publish-banner text-light" v-if="selectedSoc">
+        <b-col>
+          <p>{{ selectedSoc.label }}</p>
+        </b-col>
+        <b-col cols="auto">
+          <b-button size="lg" variant="primary" class="float-right pl-5 pr-5"
+            v-if="can(user, permissions.CONTENT_PUBLISH)" v-b-modal.publish-modal
+            :disabled="toPublish.length === 0 || !attributionSet">
+            <span v-if="toPublish.length === 0">{{ $t('content.whatnow.no_publish') }}</span>
+            <span v-else-if="!attributionSet">{{ $t('content.whatnow.set_attribution') }}</span>
+            <span v-else-if="toPublish.length > 0 && !publishing">{{ $t('content.whatnow.publish') }}</span>
+            <span v-else-if="publishing">{{ $t('content.whatnow.publishing') }}
+              <fa class="ml-2" spin :icon="['fas', 'spinner']" />
+            </span>
+          </b-button>
+        </b-col>
+      </b-row>
+      <b-row class="pl-4 pr-4 pb-4 pt-3 bg-white" v-if="selectedLanguage && selectedSoc">
+        <b-col>
+          {{ $t('content.whatnow.attribution') }}
+          <b-button size="sm" variant="primary" class="float-right rtl-float-left" @click="showEditAttributionModal"
+            v-if="canEditAttribution">{{ $t('common.edit') }}</b-button>
+          <b-modal v-model="showEditAttribution" centered
+            :title="addingNewLanguage ? $t('content.whatnow.add_language') : $t('content.whatnow.edit_attribtion')"
+            v-if="attributionTranslation !== null && canEditAttribution" no-close-on-backdrop no-close-on-esc
+            hide-header-close @cancel="cancelEditAttribution()">
+            <p v-if="addingNewLanguage">
+              {{ $t('content.whatnow.add_language_attribution') }}
+            </p>
+            <b-form-group :label="$t('content.whatnow.attribution_url')" label-for="url">
+              <b-form-input type="url" id="url" name="url" maxlength="255" v-model="attributionToEdit.url"
+                :state="updateErrors.errors.url ? false : null" placeholder="https://" />
+              <b-form-invalid-feedback id="urlFeedback">
+                <!-- This will only be shown if the preceeding input has an invalid state -->
+                <p v-for="error in updateErrors.errors.url">
+                  {{ error }}
+                </p>
+              </b-form-invalid-feedback>
+            </b-form-group>
+            <b-form-group :label="$t('content.whatnow.society_name')" label-for="socName">
+              <b-form-input type="text" id="socName" name="socName" maxlength="255"
+                v-model="attributionEditTranslation.name"
+                :state="updateErrors.errors[`translations.${updateErrors.indexError}.name`] ? false : null"
+                v-if="attributionEditTranslation" />
+              <b-form-invalid-feedback id="socNameFeedback">
+                <p>
+                  {{ $t('common.not_empty') }}
+                </p>
+              </b-form-invalid-feedback>
+            </b-form-group>
+            <b-form-group :label="$t('content.whatnow.attribution_message')" label-for="message">
+              <textarea
+                :class="`form-control ${updateErrors.errors[`translations.${updateErrors.indexError}.attributionMessage`] ? 'is-invalid' : ''}`"
+                id="message" name="message" maxlength="2048" rows="5"
+                v-model="attributionEditTranslation.attributionMessage" v-if="attributionEditTranslation"></textarea>
+            </b-form-group>
+            <div slot="modal-footer" class="w-100">
+              <span v-if="attributionEditTranslation && attributionEditTranslation.published">
+                {{ $t('content.whatnow.attribution_publish') }}
+              </span>
+              <b-btn size="sm" class="float-right ml-1" variant="secondary" @click="cancelEditAttribution">
+                {{ $t('cancel') }}
+              </b-btn>
+              <b-btn size="sm" class="float-right" variant="primary" @click="publishAttribution(true)">
+                <span v-if="attributionPublishing">
+                  <fa spin :icon="['fas', 'spinner']" />
+                </span>
+                <span v-if="attributionEditTranslation && attributionEditTranslation.published">{{
+                  $t('content.whatnow.publish') }}</span>
+                <span v-else>{{ $t('common.save_changes') }}</span>
+
+              </b-btn>
+            </div>
+          </b-modal>
+          <hr />
+          <b-row>
+            <b-col>
+              <b>{{ $t('content.whatnow.attribution_url') }}</b>
+            </b-col>
+            <b-col>
+              <b>{{ $t('content.whatnow.society_name') }}</b>
+            </b-col>
+            <b-col>
+              <b>{{ $t('content.whatnow.attribution_message') }}</b>
+            </b-col>
+          </b-row>
+          <transition name="fade">
+            <b-row class="whatnow-row mt-2 border border-secondary" v-if="attribution !== null && !loadingContent">
+              <b-col class="border border-top-0 border-bottom-0 border-left-0 pt-5 pb-5">
+                <span v-if="attribution.url">
+                  <a :href="attribution.url" rel="noreferrer" target="_blank">{{ truncate(attribution.url, 20) }}</a>
+                </span>
+                <span class="border border-warning p-1 rounded bg-warning" v-else>{{
+                  $t('content.whatnow.no_translation')}}</span>
+              </b-col>
+              <b-col class="border border-top-0 border-bottom-0 border-left-0 pt-5 pb-5">
+                <span v-if="attributionTranslation && attributionTranslation.name">
+                  {{ attribution.name }} <br />
+                  <small><i>{{ truncate(attributionTranslation.name, 90) }}</i></small>
+                </span>
+                <span class="border border-warning p-1 rounded bg-warning" v-else>{{
+                  $t('content.whatnow.no_translation')}}</span>
+              </b-col>
+              <b-col class="border border-top-0 border-bottom-0 border-left-0 pt-5 pb-5">
+                <span v-if="attributionTranslation && attributionTranslation.attributionMessage">
+                  {{ truncate(attributionTranslation.attributionMessage, 90) }}
+                </span>
+                <span class="border border-warning p-1 rounded bg-warning" v-else>{{
+                  $t('content.whatnow.no_translation')}}</span>
+              </b-col>
+            </b-row>
+          </transition>
+          <transition name="fade">
+            <b-row class="whatnow-row mt-2 border border-secondary" v-if="loadingContent">
+              <b-col class="border border-top-0 border-bottom-0 border-left-0 pt-5 pb-5">
+                <spooky width="75%" height="20px"></spooky>
+              </b-col>
+              <b-col class="border border-top-0 border-bottom-0 border-left-0 pt-5 pb-5">
+                <spooky width="75%" height="20px"></spooky>
+              </b-col>
+              <b-col class="border border-top-0 border-bottom-0 border-left-0 pt-5 pb-5">
+                <spooky width="75%" height="20px"></spooky>
+                <spooky width="100%" height="10px" class="mt-2"></spooky>
+                <spooky width="100%" height="10px" class="mt-1"></spooky>
+              </b-col>
+            </b-row>
+          </transition>
+        </b-col>
+      </b-row>
+      <b-row class="pl-4 pr-4 pb-4 pt-3 bg-white" v-else-if="!selectedLanguage && selectedSoc">
+        <h3>{{ $t('content.whatnow.no_languages') }}</h3>
+      </b-row>
+      <b-row class="pl-4 pr-4 pb-4 pt-3 bg-white" v-else-if="!selectedSoc">
+        <h3>{{ $t('content.whatnow.no_soc') }}</h3>
+      </b-row>
+      <whatnow-list :selectedSoc="selectedSoc" :selectedRegion="selectedRegion" :selectedLanguage="selectedLanguage"
+        v-if="selectedLanguage && selectedSoc"></whatnow-list>
+      <!-- Publish Modal -->
+      <b-modal id="publish-modal" size="lg" centered :ok-title="$t('content.whatnow.publish')" ok-variant="dark"
+        cancel-variant="outline-danger" hide-header @ok="publish"
+        v-if="attribution !== null && selectedLanguage && selectedSoc">
+        <div class="px-3">
+          <h3>{{ $t('content.whatnow.content_to_publish') }}</h3>
+          <p v-if="attributionTranslation">
+            {{ attributionTranslation.name }} - {{ selectedLanguage | uppercase }}
+          </p>
+          <b-card class="border whatnow-publish-modal">
+            <div v-if="attributionTranslation && !attributionTranslation.published">
+              <b-row>
+                <b-col>
+                  <h4>Attribution</h4>
+                  <hr />
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col md="3">
+                  <b>{{ $t('content.whatnow.attribution_url') }}</b>
+                </b-col>
+                <b-col md="9">
+                  {{ attribution.url }}
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col md="3">
+                  <b>{{ $t('content.whatnow.society_name') }}</b>
+                </b-col>
+                <b-col md="9" v-if="attributionTranslation">
+                  {{ attributionTranslation.name }}
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col md="3">
+                  <b>{{ $t('content.whatnow.attribution_message') }}</b>
+                </b-col>
+                <b-col md="9" v-if="attributionTranslation">
+                  {{ attributionTranslation.attributionMessage }}
+                </b-col>
+              </b-row>
+              <hr />
+            </div>
+            <h4>{{ $t('content.whatnow.whatnow_content') }}</h4>
+            <hr />
+            <div class="whatnow-publish-content-wrapper">
+              <div v-for="content in toPublish" :key="content.eventType" class="mb-3"
+                v-if="content.translations[selectedLanguage]">
+                <h5>{{ content.eventType }} {{ content.regionName ? `- ${content.regionName}` : "" }}</h5>
+
+                <b-card class="bg-grey mb-1 hazard-instruction-card" v-for="key in ['title', 'description', 'webUrl']"
+                  :key="key" v-if="attributionExists(key)">
+                  <b-row>
+                    <b-col md="3">
+                      {{ $t(`common.${key}`) }}
+                    </b-col>
+                    <b-col md="9">
+                      {{ truncate(content.translations[selectedLanguage][key], 60) }}
+                    </b-col>
+                  </b-row>
+                </b-card>
+
+                <b-card :class="`bg-grey mb-1 hazard-instruction-card hazard-instruction-card-${stageName}`"
+                  v-for="(instruction, stageName) in content.translations[selectedLanguage].stages" v-if="instruction"
+                  :key="stageName">
+                  <b-row>
+                    <b-col md="3">
+                      {{ $t(`content.edit_whatnow.${stageName}`) }}
+                    </b-col>
+                    <b-col md="9">
+                      {{ instruction.length }} {{ $t('content.whatnow.steps') }}
+                    </b-col>
+                  </b-row>
+                </b-card>
+              </div>
+            </div>
+          </b-card>
+        </div>
+      </b-modal>
+    </b-container>
+  </template>
+
+<script>
+import swal from 'sweetalert2'
+import SelectSociety from '~/pages/content/simpleSocietyPicker'
+import SelectRegion from '~/pages/content/regionPicker'
+import WhatnowList from '~/pages/content/whatnowList'
+import PageBanner from '~/components/PageBanner'
+import { mapGetters } from 'vuex'
+import * as permissionsList from '../../store/permissions'
+import Spooky from '~/components/global/Spooky'
+import axios from 'axios'
+import { languages } from 'countries-list'
+
+export default {
+  components: {
+    SelectSociety,
+    SelectRegion,
+    Spooky,
+    WhatnowList,
+    PageBanner
+  },
+  props: ['countryCode', 'regionSlug'],
+  data() {
+    return {
+      selectedSoc: null,
+      selectedRegion: null,
+      permissions: permissionsList,
+      selectedLanguage: null,
+      loadingContent: false,
+      currentTranslations: null,
+      publishing: false,
+      languageToAdd: null,
+      selectingLanguage: false,
+      languages,
+      showEditAttribution: false,
+      attributionPublishing: false,
+      addingNewLanguage: false,
+      previousLanguage: null,
+      attributionToEdit: {
+        countryCode: '',
+        url: '',
+        name: '',
+        translations: []
+      },
+      attributionEditTranslation: null,
+      updateErrors: {
+        errors: {}
+      }
+    }
+  },
+  watch: {
+    regions() {
+      if (this.regions.length && this.regionSlug) {
+        this.selectedRegion = this.regions.find(region => region.title === this.regionSlug) || null
+      }
+    },
+    selectedSoc() {
+      if (this.countryCode !== this.selectedSoc.countryCode) {
+        this.$router.push({ name: 'content.whatnow', params: { countryCode: this.selectedSoc.countryCode, regionSlug: this.selectedRegion?.title } })
+      }
+    },
+    selectedRegion() {
+      if (this.regionSlug !== this.selectedRegion?.title) {
+        this.$router.push({ name: 'content.whatnow', params: { countryCode: this.selectedSoc.countryCode, regionSlug: this.selectedRegion?.title } })
+      }
+    },
+    selectedLanguage: {
+      handler(val, oldVal) {
+        if (val !== oldVal) {
+          this.contentChange()
+          this.setLocalStorage()
+          this.setAttributionToEdit()
+        }
+      },
+      deep: true
+    },
+    currentContent: {
+      async handler(val, oldVal) {
+        if (this.selectedSoc) {
+          await this.$store.dispatch('content/fetchOrganisationSingle', this.selectedSoc.countryCode)
+        }
+        this.contentChange()
+      }
+    },
+    currentLanguages() {
+      if (this.currentLanguages && this.currentLanguages.find && !this.currentLanguages.find(lang => this.selectedLanguage === lang)) {
+        if (this.currentLanguages.length > 0) {
+          this.selectedLanguage = this.currentLanguages[0]
+        }
+      }
+    },
+    lastError() {
+      if (this.lastError.response) {
+        this.updateErrors = this.lastError.response.data
+      }
+    },
+    attribution() {
+      this.setAttributionToEdit()
+    }
+  },
+  mounted() {
+    this.getLocalStorage()
+    this.$store.dispatch('content/fetchOrganisations').then(() => {
+      this.selectedSoc = this.filteredSocieties.find((soc) => soc.countryCode === this.countryCode)
+    })
+  },
+  methods: {
+    async publish() {
+      if (this.toPublish.length > 0) {
+        this.loadingContent = true
+        this.publishing = true
+        this.$fireGTEvent(this.$gtagEvents.PublishContent)
+
+        try {
+          await axios.post(`/api/instructions/${this.selectedSoc.countryCode}/publish`, { translations: this.getPublishPayload() })
+          if (!this.attributionEditTranslation.published) {
+            this.attributionEditTranslation.published = true
+            await this.publishAttribution()
+          }
+          this.$noty.success(`${this.toPublish.length} ${this.$t('content.whatnow.published')}`)
+        } catch (e) {
+          this.publishing = false
+          this.loadingContent = false
+          this.$noty.error(this.$t('error_alert_text'))
+          console.error(e)
+        }
+        try {
+          await this.$store.dispatch('content/fetchContent', this.selectedSoc.countryCode)
+        } catch (e) {
+          this.$noty.error(this.$t('error_alert_text'))
+        }
+
+        this.publishing = false
+        this.loadingContent = false
+      }
+    },
+    setLocalStorage() {
+      localStorage.setItem('lang', this.selectedLanguage)
+    },
+    attributionExists(key) {
+      const attributionTranslation = this.attribution.translations.find(translation => translation.languageCode === this.selectedLanguage)
+      return attributionTranslation && attributionTranslation[key]
+    },
+    getLocalStorage() {
+      let lang = localStorage.getItem('lang')
+
+      if (!lang) {
+        lang = 'en'
+      }
+
+      this.selectedLanguage = lang
+    },
+    contentChange() {
+      if (this.selectedSoc) {
+        this.currentTranslations = this.currentContent.map((content) => {
+          const flattened = JSON.parse(JSON.stringify(content))
+          if (content.translations) {
+            flattened.currentTranslation = content.translations[this.selectedLanguage]
+          }
+          return flattened
+        })
+      }
+    },
+    getPublishPayload() {
+      if (this.currentTranslations) {
+        return this.currentTranslations.reduce((filtered, translation) => {
+          if (translation.currentTranslation && translation.currentTranslation.published === false) {
+            filtered.push({
+              id: translation.currentTranslation.id,
+              eventType: translation.eventType,
+              lang: translation.currentTranslation.lang
+            })
+          }
+          return filtered
+        }, [])
+      }
+      return []
+    },
+    addNewLanguage() {
+      // Does it exist already?
+      let found = false
+      for (const key in this.currentLanguages) {
+        if (this.currentLanguages.hasOwnProperty(key) && this.currentLanguages[key] === this.languageToAdd) {
+          found = true
+          swal({
+            title: this.$t('common.duplicate_lang_error'),
+            text: this.$t('common.duplicate_lang_description'),
+            type: 'warning',
+            confirmButtonColor: '#3085d6',
+            confirmButtonText: 'Close'
+          })
+        }
+      }
+      if (!found && this.languageToAdd !== null) {
+        // Add new attribution for this language
+        this.previousLanguage = this.selectedLanguage
+        this.selectedLanguage = this.languageToAdd
+        this.addingNewLanguage = true
+        this.showEditAttribution = true
+        this.selectingLanguage = false
+      }
+    },
+    async publishAttribution(fireEvent = false) {
+      if (fireEvent) {
+        this.$fireGTEvent(this.$gtagEvents.EditAttribution)
+      }
+
+      this.attributionPublishing = true
+      this.updateErrors = { errors: {} }
+      try {
+        await this.$store.dispatch('content/updateAttribution', { countryCode: this.selectedSoc.countryCode, data: this.attributionToEdit })
+        await this.$store.dispatch('content/fetchOrganisationSingle', this.selectedSoc.countryCode)
+        this.showEditAttribution = false
+        this.attributionPublishing = false
+        this.addingNewLanguage = false
+      } catch (e) {
+        // Find index of translation we've just edited so we can find it in the response from the server
+        this.updateErrors.indexError = this.attributionToEdit.translations.findIndex(translation => translation.languageCode === this.selectedLanguage)
+        this.attributionPublishing = false
+      }
+    },
+    setAttributionToEdit() {
+      if (this.attribution) {
+        this.attributionToEdit = JSON.parse(JSON.stringify(this.attribution))
+        const attributionTranslation = this.attributionToEdit.translations.find(translation => translation.languageCode === this.selectedLanguage)
+        if (!attributionTranslation) {
+          const newTranslation = {
+            attributionMessage: '',
+            languageCode: this.selectedLanguage,
+            name: '',
+            published: false
+          }
+          this.attributionToEdit.translations.push(newTranslation)
+          this.attributionEditTranslation = newTranslation
+        } else {
+          this.attributionEditTranslation = attributionTranslation
+        }
+      }
+    },
+    showEditAttributionModal() {
+      this.showEditAttribution = true
+      this.addingNewLanguage = false
+    },
+    cancelEditAttribution() {
+      if (this.addingNewLanguage) {
+        this.selectedLanguage = this.previousLanguage
+        this.addingNewLanguage = false
+      }
+      this.showEditAttribution = false
+    }
+  },
+  metaInfo() {
+    return { title: this.$t('content.whatnow.whatnow') }
+  },
+  computed: {
+    filteredLanguages() {
+      const languages = [{ value: null, text: this.$t('content.whatnow.select_language') }]
+      for (const key in this.languages) {
+        if (this.languages.hasOwnProperty(key)) {
+          languages.push({
+            value: key,
+            text: `${this.languages[key].name}  (${this.languages[key].native} - ${key})`
+          })
+        }
+      }
+      return languages
+    },
+    toPublish() {
+      if (this.currentTranslations) {
+        const toPublish = this.currentTranslations.filter(translation => translation.currentTranslation && translation.currentTranslation.published === false)
+        if (toPublish.length) {
+          return toPublish
+        }
+      }
+      return []
+    },
+    filteredSocieties() {
+      if (this.user) {
+        if (this.can(this.user, permissionsList.ALL_ORGANISATIONS)) {
+          return this.societies
+        }
+        return this.societies.filter(soc => this.user.data.organisations.indexOf(soc.countryCode) !== -1)
+      }
+      return this.societies
+    },
+    attribution() {
+      if (this.selectedSoc) {
+        return this.societies.find(soc => soc.countryCode === this.selectedSoc.countryCode)
+      }
+      return null
+    },
+    attributionTranslation() {
+      if (this.attribution) {
+        return this.attribution.translations.find(translation => translation.languageCode === this.selectedLanguage)
+      }
+      return null
+    },
+    canEditAttribution() {
+      if ((this.attributionTranslation && !this.attributionTranslation.published) || !this.attributionTranslation) {
+        return this.can(this.user, permissionsList.CONTENT_CREATE) && !this.selectedRegion
+      }
+      return this.can(this.user, permissionsList.CONTENT_PUBLISH) && !this.selectedRegion
+    },
+    attributionSet() {
+      return this.attributionTranslation && this.attributionTranslation.name && this.attributionTranslation.attributionMessage
+    },
+    currentRegionName() {
+      if (!this.selectedRegion) {
+        return ""
+      }
+
+      if (this.selectedLanguage && this.selectedRegion.translations[this.selectedLanguage]?.title) {
+        return this.selectedRegion.translations[this.selectedLanguage].title
+      }
+
+      return this.selectedRegion.translations[0]?.title || ""
+    },
+    ...mapGetters({
+      user: 'auth/user',
+      currentContent: 'content/currentContent',
+      currentLanguages: 'content/currentLanguages',
+      societies: 'content/organisations',
+      lastError: 'generic/lastError',
+      regions: 'content/regionsArray'
+    })
+  }
+}
+</script>
+
+
+
+<!-- PUBLISH BUTTON -->
+<template>
+  <b-container fluid class="h-100 whatnow-message-editor-container">
+    <b-row>
+      <b-col>
+        <div class="whatnow-message-editor-header">
+          <h1>{{ $t('content.message_editor.title') }} {{ currentRegionName && `- ${currentRegionName}` }}</h1>
+        </div>
+      </b-col>
+    </b-row>
+    <b-row class="pl-4 pr-4 pb-3 pt-3 selects-container d-flex align-items-center justify-content-start m-auto"
+      v-show="selectedSoc">
+      <b-col class="d-flex align-items-center">
+        <selectSociety v-model="selectedSoc" :societyList="filteredSocieties" :countryCode="countryCode">
+        </selectSociety>
+        <selectRegion v-model="selectedRegion" :socCode="selectedSoc.countryCode" :translationCode="selectedLanguage">
+        </selectRegion>
+      </b-col>
+    </b-row>
+    <b-row class="m-3">
+      <b-col>
+        <b-nav tabs class="whatnow-message-editor-tabs">
+          <b-nav-item v-for="lang in currentLanguages" :key="lang" class="wn-item" @click="selectedLanguage = lang"
+            :active="selectedLanguage === lang">
+            <div class="nav-link-wrapper text-center h-100" v-if="lang">
+              {{ lang | uppercase }} -
+              <small v-if="languages[lang]">{{ truncate(languages[lang].name, 8) }}</small>
+            </div>
+          </b-nav-item>
+          <b-nav-item class="add-lang-btn ml-2" v-b-tooltip.hover
+            :title="selectingLanguage ? null : $t('content.whatnow.add_language')" @click="selectingLanguage = true"
+            v-if="can(user, permissions.CONTENT_CREATE)">
+            <fa :icon="['fas', 'plus']" />
+          </b-nav-item>
+        </b-nav>
+      </b-col>
+    </b-row>
+    <b-row class="whatnow-message-editor-ns-title" v-if="selectedSoc">
+      <b-col>
+        <div class="d-flex justify-content-between align-items-center">
+          <h4>
+            {{ selectedSoc.name }}
+          </h4>
+
+          <div class="d-flex align-items-center">
+            <b-button variant="outline-primary" size="sm" class="mr-2"
+              v-if="canEditAttribution && !languageToAdd && !editing" @click="editing = true"
+              :disabled="!canEditAttribution" :key="'edit'">
+              <font-awesome-icon :icon="['fas', 'pen']" />
+              {{ $t('common.edit') }}
+            </b-button>
+            <b-button variant="primary" size="sm" class="mr-2" v-if="canEditAttribution && (languageToAdd || editing)"
+              :disabled="!canEditAttribution" @click="publishAttribution(true)" :key="'save'">
+              <font-awesome-icon :icon="['fas', 'check']" />
+              {{ $t('common.save') }}
+            </b-button>
+            <b-button variant="outline-primary" size="sm" class="mr-2" v-if="canEditAttribution && editing"
+              :disabled="!canEditAttribution" :key="'add'" @click="addContributor">
+              {{ $t('common.add') + ' ' + $t('content.message_editor.contributor_single') }}
+            </b-button>
+            <b-button variant="outline-primary" size="sm" v-if="canEditAttribution && (languageToAdd || editing)"
+              @click="discard" :disabled="!canEditAttribution" :key="'cancel'">
+              <font-awesome-icon :icon="['fas', 'xmark']" />
+              {{ $t('common.cancel') }}
+            </b-button>
+          </div>
+        </div>
+      </b-col>
+    </b-row>
+    <!-- FORM ORG -->
+    <b-row align-v="stretch"
+      class="pl-4 pr-4 pb-3 pt-3 whatnow-message-editor-form-card d-flex align-items-center justify-content-start mb-3 mr-3 ml-auto mr-auto">
+
+      <b-col lg="5">
+        <div class="d-flex justify-content-start align-items-start">
+          <div slot="button-content" class="text-dark py-0 mr-3">
+            <img v-if="false" :src="''" class="rounded-circle profile-photo mr-1 rtl-ml-1" alt="NS Profile Photo">
+            <avatar v-else class="rounded-circle profile-photo mr-1 rtl-ml-1" :size="50" :username="'A'"></avatar>
+          </div>
+          <b-row>
+            <b-col lg="12">
+              <b-form-group :label="$t('content.message_editor.society_name_label')" label-for="socName">
+                <b-form-input type="text" id="socName" name="socName" maxlength="255"
+                  v-model="attributionEditTranslation.name"
+                  :state="updateErrors.errors[`translations.${updateErrors.indexError}.name`] ? false : null"
+                  v-if="attributionEditTranslation" :disabled="isFormDisabled" />
+                <b-form-invalid-feedback id="socNameFeedback">
+                  <p>
+                    {{ $t('common.not_empty') }}
+                  </p>
+                </b-form-invalid-feedback>
+              </b-form-group>
+            </b-col>
+            <b-col lg="12">
+              <b-form-group :label="$t('content.message_editor.attribution_url_label')" label-for="url">
+                <b-form-input type="url" id="url" name="url" maxlength="255" v-model="attributionToEdit.url"
+                  :state="updateErrors.errors.url ? false : null" placeholder="https://" :disabled="isFormDisabled" />
+                <b-form-invalid-feedback id="urlFeedback">
+                  <!-- This will only be shown if the preceeding input has an invalid state -->
+                  <p v-for="error in updateErrors.errors.url">
+                    {{ error }}
+                  </p>
+                </b-form-invalid-feedback>
+              </b-form-group>
+            </b-col>
+          </b-row>
+        </div>
+
+      </b-col>
+
+      <b-col lg="7">
+        <b-form-group :label="$t('content.message_editor.attribution_message_label')" label-for="message">
+          <textarea
+            :class="`form-control ${updateErrors.errors[`translations.${updateErrors.indexError}.attributionMessage`] ? 'is-invalid' : ''}`"
+            id="message" name="message" maxlength="2048" rows="5"
+            v-model="attributionEditTranslation.attributionMessage" v-if="attributionEditTranslation"
+            :disabled="isFormDisabled"></textarea>
+        </b-form-group>
+      </b-col>
+    </b-row>
+
+    <b-row v-if="contributors.length > 0" align-v="stretch"
+      class="pl-4 pr-4 pb-3 pt-3 whatnow-message-editor-form-card d-flex align-items-center justify-content-start m-auto mb-3 mr-3 ml-auto mr-auto">
+      <b-col lg="12">
+        <div v-for="(contributor, index) in attributionEditTranslation.contributors" :key="index">
+          <div class="d-flex justify-content-start align-items-start">
+            <div slot="button-content" class="text-dark py-0 mr-3">
+              <img v-if="false" :src="''" class="rounded-circle profile-photo mr-1 rtl-ml-1" alt="NS Profile Photo">
+              <avatar v-else class="rounded-circle profile-photo mr-1 rtl-ml-1" :size="50" :username="'A'"></avatar>
+            </div>
+            <b-form-group :label="$t('content.message_editor.contributor_name_label')" class="w-50"
+              :label-for="'contributorName' + index">
+              <b-form-input type="text" :id="'contributorName' + index" :name="'contributorName' + index"
+                v-model="contributor.name" maxlength="100"
+                :state="updateErrors.errors[`contributors.${index}.name`] ? false : null" />
+              <b-form-invalid-feedback v-if="updateErrors.errors[`contributors.${index}.name`]">
+                {{ $t('common.not_empty') }}
+              </b-form-invalid-feedback>
+            </b-form-group>
+          </div>
+        </div>
+      </b-col>
+    </b-row>
+
+    <!-- END FORM ORG -->
+    <b-row>
+      <b-col>
+        <whatnow-list :selectedSoc="selectedSoc" :selectedRegion="selectedRegion" :selectedLanguage="selectedLanguage"
+          v-if="selectedLanguage && selectedSoc"></whatnow-list>
+      </b-col>
+    </b-row>
+
+    <!-- PUBLISH BUTTON -->
+    <div class="publish-bottom-container d-flex justify-content-end" v-if="selectedSoc">
+      <b-button size="md" variant="outline-primary" v-if="can(user, permissions.CONTENT_PUBLISH)"
+        v-b-modal.publish-modal :disabled="toPublish.length === 0 || !attributionSet" class="align-self-center">
+        <span v-if="toPublish.length === 0">{{ $t('content.whatnow.no_publish') }}</span>
+        <span v-else-if="!attributionSet">{{ $t('content.whatnow.set_attribution') }}</span>
+        <span v-else-if="toPublish.length > 0 && !publishing">{{ $t('content.whatnow.publish') }}</span>
+        <span v-else-if="publishing">{{ $t('content.whatnow.publishing') }}
+          <fa class="ml-2" spin :icon="['fas', 'spinner']" />
+        </span>
+      </b-button>
+    </div>
+
+    <!-- Publish Modal -->
+    <b-modal id="publish-modal" size="lg" centered :ok-title="$t('content.whatnow.publish')" ok-variant="primary" cancel-variant="outline-primary" hide-header @ok="publish"
+      v-if="attribution !== null && selectedLanguage && selectedSoc">
+      <div class="px-3">
+        <h3>{{ $t('content.whatnow.content_to_publish') }}</h3>
+        <p v-if="attributionTranslation">
+          {{ attributionTranslation.name }} - {{ selectedLanguage | uppercase }}
+        </p>
+        <b-card class="whatnow-org-publish-modal">
+          <div class="whatnow-publish-header">
+            <h4>Attribution</h4>
+          </div>
+
+          <div class="d-flex justify-content-start align-items-start">
+            <div class="mr-3">
+              <img v-if="false" :src="''" class="rounded-circle profile-photo mr-1 rtl-ml-1" alt="NS Profile Photo">
+              <avatar v-else class="rounded-circle profile-photo mr-1 rtl-ml-1" :size="50" :username="'A'"></avatar>
+            </div>
+            <div class="whatnow-org-publish-modal-content">
+              <div class="d-flex justify-content-start align-items-center whatnow-org-publish-modal-content-item">
+                <h5>National Society</h5>
+                <p>{{ attributionTranslation.name }}</p>	
+              </div>
+
+              <div class="d-flex justify-content-start align-items-center whatnow-org-publish-modal-content-item">
+                <h5>Attribution URL</h5>
+                <p>{{ attributionTranslation.url }}</p>
+              </div>
+
+              <div class="d-flex justify-content-start align-items-center whatnow-org-publish-modal-content-item">
+                <h5>Attribution Message</h5>
+                <p>{{ attributionTranslation.attributionMessage }}</p>
+              </div>
+            </div>
+          </div>
+        </b-card>
+
+        <div class="whatnow-publish-content-wrapper">
+          <div v-for="content in toPublish" :key="content.eventType" class="mb-3"
+            v-if="content.translations[selectedLanguage]">
+            <h5>{{ content.eventType }} {{ content.regionName ? `- ${content.regionName}` : "" }}</h5>
+
+            <whatnow-resumen :translation="content.translations[selectedLanguage]"></whatnow-resumen>
+          </div>
+        </div>
+      </div>
+    </b-modal>
+
+    <b-modal v-model="selectingLanguage" id="role-changed" centered :title="'Add new language'" ref="selectLangModal"
+      ok-variant="primary" cancel-variant="outline-primary" @ok="addNewLanguage" @cancel="languageToAdd = null"
+      :ok-title="$t('common.add')" :cancel-title="$t('common.cancel')">
+      <b-form-select v-model="languageToAdd" :options="filteredLanguages" />
+    </b-modal>
+  </b-container>
+
+</template>
+
+<script>
+import swal from 'sweetalert2'
+import SelectSociety from '~/pages/content/simpleSocietyPicker'
+import SelectRegion from '~/pages/content/regionPicker'
+import WhatnowList from '~/pages/content/whatnowList'
+import PageBanner from '~/components/PageBanner'
+import { mapGetters, mapActions } from 'vuex'
+import * as permissionsList from '../../store/permissions'
+import Spooky from '~/components/global/Spooky'
+import axios from 'axios'
+import { languages } from 'countries-list'
+import WhatnowResumen from './whatnowResumen.vue'
+
+import Avatar from 'vue-avatar'
+export default {
+  components: {
+    SelectSociety,
+    SelectRegion,
+    Spooky,
+    WhatnowList,
+    PageBanner,
+    WhatnowResumen,
+    Avatar
+  },
+  props: ['countryCode', 'regionSlug'],
+  data() {
+    return {
+      selectedSoc: null,
+      selectedRegion: null,
+      permissions: permissionsList,
+      selectedLanguage: null,
+      loadingContent: false,
+      currentTranslations: null,
+      publishing: false,
+      languageToAdd: null,
+      selectingLanguage: false,
+      languages,
+      showEditAttribution: false,
+      attributionPublishing: false,
+      addingNewLanguage: false,
+      previousLanguage: null,
+      attributionToEdit: {
+        countryCode: '',
+        url: '',
+        name: '',
+        translations: [],
+        contributors: []
+      },
+      attributionEditTranslation: null,
+      updateErrors: {
+        errors: {}
+      },
+      editing: false,
+      contributors: []
+    }
+  },
+  watch: {
+    regions() {
+      if (this.regions.length && this.regionSlug) {
+        this.selectedRegion = this.regions.find(region => region.title === this.regionSlug) || null
+      }
+    },
+    selectedSoc() {
+      if (this.countryCode !== this.selectedSoc.countryCode) {
+        this.$router.push({ name: 'content.whatnow', params: { countryCode: this.selectedSoc.countryCode, regionSlug: this.selectedRegion?.title } })
+      }
+    },
+    selectedRegion() {
+      if (this.regionSlug !== this.selectedRegion?.title) {
+        this.$router.push({ name: 'content.whatnow', params: { countryCode: this.selectedSoc.countryCode, regionSlug: this.selectedRegion?.title } })
+      }
+    },
+    selectedLanguage: {
+      handler(val, oldVal) {
+        if (val !== oldVal) {
+          this.contentChange()
+          this.setLocalStorage()
+          this.setAttributionToEdit()
+        }
+      },
+      deep: true
+    },
+    currentContent: {
+      async handler(val, oldVal) {
+        if (this.selectedSoc) {
+          await this.$store.dispatch('content/fetchOrganisationSingle', this.selectedSoc.countryCode)
+        }
+        this.contentChange()
+      }
+    },
+    currentLanguages() {
+      if (this.currentLanguages && this.currentLanguages.find && !this.currentLanguages.find(lang => this.selectedLanguage === lang)) {
+        if (this.currentLanguages.length > 0) {
+          this.selectedLanguage = this.currentLanguages[0]
+        }
+      }
+    },
+    lastError() {
+      if (this.lastError.response) {
+        this.updateErrors = this.lastError.response.data
+      }
+    },
+    attribution() {
+      this.setAttributionToEdit()
+    }
+  },
+  mounted() {
+    this.getLocalStorage()
+    this.getData()
+  },
+  methods: {
+    ...mapActions({
+      setCurrentLanguages: 'content/setCurrentLanguages'
+    }),
+    async getData() {
+      this.$store.dispatch('content/fetchOrganisations').then(() => {
+        this.selectedSoc = this.filteredSocieties.find((soc) => soc.countryCode === this.countryCode)
+      })
+    },
+    async publish() {
+      if (this.toPublish.length > 0) {
+        this.loadingContent = true
+        this.publishing = true
+        this.$fireGTEvent(this.$gtagEvents.PublishContent)
+
+        try {
+          await axios.post(`/api/instructions/${this.selectedSoc.countryCode}/publish`, { translations: this.getPublishPayload() })
+          if (!this.attributionEditTranslation.published) {
+            this.attributionEditTranslation.published = true
+            await this.publishAttribution()
+          }
+          this.$noty.success(`${this.toPublish.length} ${this.$t('content.whatnow.published')}`)
+        } catch (e) {
+          this.publishing = false
+          this.loadingContent = false
+          this.$noty.error(this.$t('error_alert_text'))
+          console.error(e)
+        }
+        try {
+          await this.$store.dispatch('content/fetchContent', this.selectedSoc.countryCode)
+        } catch (e) {
+          this.$noty.error(this.$t('error_alert_text'))
+        }
+
+        this.publishing = false
+        this.loadingContent = false
+      }
+    },
+    setLocalStorage() {
+      localStorage.setItem('lang', this.selectedLanguage)
+    },
+    attributionExists(key) {
+      const attributionTranslation = this.attribution.translations.find(translation => translation.languageCode === this.selectedLanguage)
+      return attributionTranslation && attributionTranslation[key]
+    },
+    getLocalStorage() {
+      let lang = localStorage.getItem('lang')
+
+      if (!lang) {
+        lang = 'en'
+      }
+
+      this.selectedLanguage = lang
+    },
+    contentChange() {
+      if (this.selectedSoc) {
+        this.currentTranslations = this.currentContent.map((content) => {
+          const flattened = JSON.parse(JSON.stringify(content))
+          if (content.translations) {
+            flattened.currentTranslation = content.translations[this.selectedLanguage]
+          }
+          return flattened
+        })
+      }
+    },
+    getPublishPayload() {
+      if (this.currentTranslations) {
+        return this.currentTranslations.reduce((filtered, translation) => {
+          if (translation.currentTranslation && translation.currentTranslation.published === false) {
+            filtered.push({
+              id: translation.currentTranslation.id,
+              eventType: translation.eventType,
+              lang: translation.currentTranslation.lang
+            })
+          }
+          return filtered
+        }, [])
+      }
+      return []
+    },
+    addNewLanguage() {
+      // Does it exist already?
+      let found = false
+      for (const key in this.currentLanguages) {
+        if (this.currentLanguages.hasOwnProperty(key) && this.currentLanguages[key] === this.languageToAdd) {
+          found = true
+          swal({
+            title: this.$t('common.duplicate_lang_error'),
+            text: this.$t('common.duplicate_lang_description'),
+            type: 'warning',
+            confirmButtonColor: '#3085d6',
+            confirmButtonText: 'Close'
+          })
+        }
+      }
+      if (!found && this.languageToAdd !== null) {
+        // Add new attribution for this language
+        this.previousLanguage = this.selectedLanguage
+        this.selectedLanguage = this.languageToAdd
+        this.addingNewLanguage = true
+        this.showEditAttribution = true
+        this.selectingLanguage = false
+      }
+
+      this.currentLanguages.push(this.languageToAdd)
+      this.selectingLanguage = false
+    },
+    async publishAttribution(fireEvent = false) {
+      if (fireEvent) {
+        this.$fireGTEvent(this.$gtagEvents.EditAttribution)
+      }
+
+      this.attributionPublishing = true
+
+      const valid = this.validateForm()
+      if (!valid) {
+        this.attributionPublishing = false
+        return
+      }
+
+
+      try {
+        await this.$store.dispatch('content/updateAttribution', { countryCode: this.selectedSoc.countryCode, data: this.attributionToEdit })
+        await this.$store.dispatch('content/fetchOrganisationSingle', this.selectedSoc.countryCode)
+        this.showEditAttribution = false
+        this.attributionPublishing = false
+        this.addingNewLanguage = false
+      } catch (e) {
+        // Find index of translation we've just edited so we can find it in the response from the server
+        this.updateErrors.indexError = this.attributionToEdit.translations.findIndex(translation => translation.languageCode === this.selectedLanguage)
+        this.attributionPublishing = false
+      }
+    },
+    setAttributionToEdit() {
+      console.log('this.attribution', this.attribution)
+      if (this.attribution) {
+        this.attributionToEdit = JSON.parse(JSON.stringify(this.attribution))
+        const attributionTranslation = this.attributionToEdit.translations.find(translation => translation.languageCode === this.selectedLanguage)
+        console.log('attributionTranslation', attributionTranslation)
+        if (!attributionTranslation) {
+          const newTranslation = {
+            attributionMessage: '',
+            languageCode: this.selectedLanguage,
+            name: '',
+            published: false,
+            contributors: []
+          }
+          this.attributionToEdit.translations.push(newTranslation)
+          this.attributionEditTranslation = newTranslation
+        } else {
+          this.attributionEditTranslation = attributionTranslation
+          this.contributors = this.attributionEditTranslation.contributors
+        }
+      }
+    },
+    showEditAttributionModal() {
+      this.showEditAttribution = true
+      this.addingNewLanguage = false
+    },
+    cancelEditAttribution() {
+      if (this.addingNewLanguage) {
+        this.selectedLanguage = this.previousLanguage
+        this.addingNewLanguage = false
+      }
+      this.showEditAttribution = false
+    },
+    openSelectLangModal() {
+      this.$refs.selectLangModal.show()
+    },
+    discard() {
+      const filteredLangs = this.currentLanguages.filter(lang => lang !== this.languageToAdd)
+      this.setCurrentLanguages(filteredLangs)
+      this.languageToAdd = null
+      this.addingNewLanguage = false
+      this.editing = false
+      this.contributors = []
+      this.getData()
+    },
+    addContributor() {
+      this.attributionEditTranslation.contributors.push({ name: '', logo: '' })
+    },
+    validateForm() {
+      this.updateErrors = { errors: {} }
+
+      if (!this.attributionEditTranslation.name) {
+        this.updateErrors.errors[`translations.${this.updateErrors.indexError}.name`] = true;
+      }
+      if (!this.attributionEditTranslation.attributionMessage) {
+        this.updateErrors.errors[`translations.${this.updateErrors.indexError}.attributionMessage`] = true;
+      }
+      if (!this.attributionToEdit.url) {
+        this.updateErrors.errors.url = ["URL no puede estar vacía"];
+      }
+
+      this.attributionEditTranslation.contributors.forEach((contributor, index) => {
+        if (!contributor.name.trim()) {
+          this.updateErrors.errors[`contributors.${index}.name`] = true;
+        }
+
+        if (Object.keys(this.updateErrors).length > 0) {
+          return false;
+        }
+
+        return true;
+      });
+    }
+  },
+  metaInfo() {
+    return { title: this.$t('content.whatnow.whatnow') }
+  },
+  computed: {
+    isFormDisabled() {
+      return !this.editing && !this.addingNewLanguage
+    },
+    filteredLanguages() {
+      const languages = [{ value: null, text: this.$t('content.whatnow.select_language') }]
+      for (const key in this.languages) {
+        if (this.languages.hasOwnProperty(key)) {
+          languages.push({
+            value: key,
+            text: `${this.languages[key].name}  (${this.languages[key].native} - ${key})`
+          })
+        }
+      }
+      return languages
+    },
+    toPublish() {
+      if (this.currentTranslations) {
+        const toPublish = this.currentTranslations.filter(translation => translation.currentTranslation && translation.currentTranslation.published === false)
+        if (toPublish.length) {
+          return toPublish
+        }
+      }
+      return []
+    },
+    filteredSocieties() {
+      if (this.user) {
+        if (this.can(this.user, permissionsList.ALL_ORGANISATIONS)) {
+          return this.societies
+        }
+        return this.societies.filter(soc => this.user.data.organisations.indexOf(soc.countryCode) !== -1)
+      }
+      return this.societies
+    },
+    attribution() {
+      if (this.selectedSoc) {
+        return this.societies.find(soc => soc.countryCode === this.selectedSoc.countryCode)
+      }
+      return null
+    },
+    attributionTranslation() {
+      if (this.attribution) {
+        return this.attribution.translations.find(translation => translation.languageCode === this.selectedLanguage)
+      }
+      return null
+    },
+    canEditAttribution() {
+      if ((this.attributionTranslation && !this.attributionTranslation.published) || !this.attributionTranslation) {
+        return this.can(this.user, permissionsList.CONTENT_CREATE) && !this.selectedRegion
+      }
+      return this.can(this.user, permissionsList.CONTENT_PUBLISH) && !this.selectedRegion
+    },
+    attributionSet() {
+      return this.attributionTranslation && this.attributionTranslation.name && this.attributionTranslation.attributionMessage
+    },
+    currentRegionName() {
+      if (!this.selectedRegion) {
+        return ""
+      }
+
+      if (this.selectedLanguage && this.selectedRegion.translations[this.selectedLanguage]?.title) {
+        return this.selectedRegion.translations[this.selectedLanguage].title
+      }
+
+      return this.selectedRegion.translations[0]?.title || ""
+    },
+    ...mapGetters({
+      user: 'auth/user',
+      currentContent: 'content/currentContent',
+      currentLanguages: 'content/currentLanguages',
+      societies: 'content/organisations',
+      lastError: 'generic/lastError',
+      regions: 'content/regionsArray'
+    }),
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../../sass/variables.scss';
+
+.whatnow-message-editor-container {
+  position: relative;
+  
+  .publish-bottom-container {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    height: 70px;
+    width: 100%;
+    background-color: $white;
+
+    button {
+      margin-right: 50px;
+      font-size: 18px;
+    }
+  }
+}
+
+.whatnow-publish-content-wrapper {
+  max-height: 60vh;
+  overflow-y: scroll;
+}
+
+.whatnow-org-publish-modal {
+  border-radius: 7px;
+  background-color: #f7f7f7;
+  border: none;
+  margin-bottom: 25px;
+
+  .whatnow-publish-header {
+    margin-bottom: 10px;
+    h4 {
+      color: #1e1e1e;
+      font-size: 18px;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 1px;
+      background-color: #dee2e6;
+      margin-top: 10px;
+    }
+  }
+
+  .whatnow-org-publish-modal-content {
+    .whatnow-org-publish-modal-content-item {
+      font-size: 14px;
+      margin-bottom: 8px;
+      h5 {
+        font-weight: 500;
+        color: #1e1e1e;
+        margin-right: 70px;
+        min-width: 165px;
+      }
+      h5, p {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.whatnow-message-editor-tabs.nav-tabs {
+  border-bottom: none;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background-color: #dee2e6;
+    z-index: -1;
+  }
+
+  .nav-item {
+
+    .nav-link,
+    .nav-link-wrapper,
+    .nav-link.active {
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+      margin-right: 2px;
+    }
+  }
+
+  .nav-item.add-lang-btn {
+    margin-top: 4px;
+
+    .nav-link,
+    .nav-link-wrapper,
+    .nav-link.active {
+      border: none;
+    }
+
+    background-color: #f3f3f3;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    outline: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+
+    svg {
+      color: $red;
+      font-size: 11px;
+    }
+  }
+}
+
+.whatnow-message-editor-ns-title {
+  margin: 18px 0;
+
+  .btn-outline-primary {
+    padding: 0px 12px
+  }
+
+  .btn-primary {
+    padding: 2px 12px
+  }
+
+
+
+  h4 {
+    font-size: 24px;
+    font-weight: 500;
+    color: #1e1e1e;
+  }
+}
+
+.whatnow-message-editor-header {
+  h1 {
+    font-size: 38px;
+    font-weight: 600;
+    color: #1e1e1e;
+  }
+}
+
+.whatnow-message-editor-form-card {
+  background: #F7F7F7;
+  border-radius: 10px;
+
+  label {
+    font-size: 16px;
+    font-weight: 500;
+    font-stretch: normal;
+    font-style: normal;
+    color: $text-dark;
+  }
+
+  input,
+  textarea {
+    border-radius: 6px;
+    background-color: $bg-input-light;
+    height: 36px;
+    font-size: 11px;
+    border: none;
+    outline: none;
+  }
+
+  textarea {
+    min-height: 115px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/pages/content/whatnowContentItem.vue b/resources/assets/js/pages/content/whatnowContentItem.vue
index a45ebd0..2b8262f 100644
--- a/resources/assets/js/pages/content/whatnowContentItem.vue
+++ b/resources/assets/js/pages/content/whatnowContentItem.vue
@@ -87,44 +87,27 @@
                   <b-col cols="12">
                     <h4 class="subtitle-card">{{ urgency.text }}</h4>
                   </b-col>
-                  <b-col 
-                    class="hazard-card" 
-                    cols="4" 
-                    v-for="(stageKey, index) in Object.keys(content.currentTranslation.stages)" 
-                    :key="'stage'+index" 
+                  <b-col
+                    class="hazard-card"
+                    cols="4"
+                    v-for="(stageKey, index) in Object.keys(content.currentTranslation.stages)"
+                    :key="'stage'+index"
                     v-if="urgency.stages.includes(stageKey)"
                   >
-                    <b-card class="h-100 key-message-card" v-if="content.currentTranslation.stages[stageKey]">
-                      <div class="mb-2">
-                        <h4 class="card-title mb-3">
-                          {{ $t('content.edit_whatnow.'+stageKey) }}
-                        </h4>
-                        <div class="key-message-item" v-for="(keyMessage, index) in content.currentTranslation.stages[stageKey]" :key="'instruction'+index">
-                          <h5 class="card-text key-message-item-title">
-                            {{ keyMessage.title  }}
-                          </h5>
-                          <ul class="key-message-item-list">
-                            <li class="text-card" v-for="(supportingMessage, index) in keyMessage.content" :key="'supportingMessage'+index">
-                              {{ supportingMessage }}
-                            </li>
-                          </ul>
-                        </div>
-                      </div>
-                      <div class="button-container mt-4 mb-4 key-message-item-btn">
-                        <b-button variant="danger" class="button-go" @click="openKeyMessageVisualizer(content.currentTranslation.stages[stageKey], content.eventType)">
-                          {{ $t('content.whatnow.show_more') }}
-                        </b-button>
-                      </div>
-                    </b-card>
+                    <whatnow-message-card v-if="content.currentTranslation.stages[stageKey]"
+                      :stage="content.currentTranslation.stages[stageKey]"
+                      :stageName="stageKey" :eventType="content.eventType"
+                      :title="content.currentTranslation.title"
+                      :description="content.currentTranslation.description"
+                      :selectedSoc="selectedSoc"
+                      :selectedLanguage="selectedLanguage"
+                    />
                   </b-col>
                 </b-row>
               </b-card-body>
           </b-collapse>
         </b-card-header>
       </b-card>
-      <b-modal size="xl"  ref="keyMessageVisualizer" :hide-header="true" id="pre-image" centered ok-variant="outline-primary" :ok-title="'Descargar'">
-        <whatnowPrevisualizer :keyMessage="openedKeyMessage"></whatnowPrevisualizer>
-      </b-modal>
     </b-col>
   </b-row>
 </template>
@@ -133,13 +116,15 @@ import { mapGetters } from 'vuex'
 import * as permissionsList from '../../store/permissions'
 import swal from 'sweetalert2'
 import WhatnowDownloadImage from './whatnowDownloadImage'
-import whatnowPrevisualizer from './whatnowPrevisualizer.vue'
+import whatnowPrevisualizer from './whatnowPrevisualizer'
+import WhatnowMessageCard from './whatnowMessageCard'
 
 export default {
-  props: ['selectedLanguage', 'content', 'isPromo', 'regionSlug', 'forceCreate'],
+  props: ['selectedLanguage', 'content', 'isPromo', 'regionSlug', 'forceCreate', 'selectedSoc'],
   components: {
     WhatnowDownloadImage,
-    whatnowPrevisualizer
+    whatnowPrevisualizer,
+    WhatnowMessageCard,
   },
   data() {
     return {
@@ -166,7 +151,6 @@ export default {
           description: this.$t('content.edit_whatnow.recovery_description')
         },
       ],
-      openedKeyMessage: null
     }
   },
   methods: {
@@ -199,10 +183,6 @@ export default {
       }
       return false
     },
-    openKeyMessageVisualizer(keyMessage) {
-      this.openedKeyMessage = keyMessage
-      this.$refs.keyMessageVisualizer.show()
-    },
   },
   computed: {
     editLink() {
@@ -270,31 +250,6 @@ export default {
   }
 }
 
-.key-message-item {
-  margin-bottom: 11px;
-  &::after {
-    content: '';
-    display: block;
-    width: 90%;
-    height: 0.7px;
-    background-color: $cad-solid-bg-3;
-    margin: 24px auto;
-  }
-
-  .key-message-item-title {
-    font-size: 16.8px;
-    font-weight: 500;
-    color: #000;
-  }
-
-  ul.key-message-item-list {
-    li {
-      font-size: 14px;
-      color: #1e1e1e;
-    }
-  }
-}
-
 .hazard-card {
   .key-message-item-btn {
     position: absolute;
@@ -346,11 +301,6 @@ export default {
   font-size: 14px;
 }
 
-.key-message-card {
-  background: #E9E9E9;
-  padding-bottom: 40px;
-}
-
 .content-info {
   color: #1e1e1e;
   .card-title {
diff --git a/resources/assets/js/pages/content/whatnowList.vue b/resources/assets/js/pages/content/whatnowList.vue
index 28c28c4..0327758 100644
--- a/resources/assets/js/pages/content/whatnowList.vue
+++ b/resources/assets/js/pages/content/whatnowList.vue
@@ -43,7 +43,8 @@
             :content="content"
             :isPromo="isPromo"
             v-on:languageChange="languageChange"
-            :regionSlug="selectedRegion?.title">
+            :regionSlug="selectedRegion?.title"
+            :selectedSoc="selectedSoc">
           </whatnow-content-item>
           <whatnow-content-item
             v-for="content in uncreatedTranslations"
@@ -54,7 +55,8 @@
             :isPromo="isPromo"
             v-on:languageChange="languageChange"
             :regionSlug="selectedRegion?.title"
-            :forceCreate="true">
+            :forceCreate="true"
+            :selectedSoc="selectedSoc">
           </whatnow-content-item>
         </transition-group>
 
diff --git a/resources/assets/js/pages/content/whatnowMessageCard.vue b/resources/assets/js/pages/content/whatnowMessageCard.vue
new file mode 100644
index 0000000..0d3da63
--- /dev/null
+++ b/resources/assets/js/pages/content/whatnowMessageCard.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <b-card class="h-100 key-message-card" >
+      <div class="mb-2">
+        <h4 class="card-title mb-3">
+          {{ $t('content.edit_whatnow.'+stageName) }}
+        </h4>
+        <div class="key-message-item" v-for="(keyMessage, index) in stage" :key="'stage'+index">
+          <h5 class="card-text key-message-item-title">
+            {{ keyMessage.title  }}
+          </h5>
+          <ul class="key-message-item-list">
+            <li class="text-card" v-for="(supportingMessage, index) in keyMessage.content" :key="'supportingMessage'+index">
+              {{ supportingMessage }}
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="button-container mt-4 mb-4 key-message-item-btn">
+        <b-button variant="danger" class="button-go" @click="openKeyMessageVisualizer()">
+          {{ $t('content.whatnow.show_more') }}
+        </b-button>
+      </div>
+    </b-card>
+    <b-modal size="xl"  ref="keyMessageVisualizer" :hide-footer="true" id="pre-image" centered :hide-header="true">
+      <whatnowPrevisualizer
+        :keyMessage="stage"
+        :eventType="eventType"
+        :stageName="stageName"
+        :title="title"
+        :description="description"
+        :selectedSoc="selectedSoc"
+        :selectedLanguage="selectedLanguage"
+      />
+    </b-modal>
+  </div>
+</template>
+<script>
+import whatnowPrevisualizer from './whatnowPrevisualizer.vue'
+
+export default {
+  props: ['stage', 'stageName', 'eventType', 'stageName', 'title', 'description', 'selectedSoc', 'selectedLanguage'],
+  components: {
+    whatnowPrevisualizer
+  },
+  methods: {
+    openKeyMessageVisualizer() {
+      this.$refs.keyMessageVisualizer.show()
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+.key-message-card {
+  background: #E9E9E9;
+  padding-bottom: 40px;
+}
+.key-message-item {
+  margin-bottom: 11px;
+  &::after {
+    content: '';
+    display: block;
+    width: 90%;
+    height: 0.7px;
+    background-color: $cad-solid-bg-3;
+    margin: 24px auto;
+  }
+
+  .key-message-item-title {
+    font-size: 16.8px;
+    font-weight: 500;
+    color: #000;
+  }
+
+  ul.key-message-item-list {
+    li {
+      font-size: 14px;
+      color: #1e1e1e;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/pages/content/whatnowPrevisualizer.vue b/resources/assets/js/pages/content/whatnowPrevisualizer.vue
index 56face0..a67ecb4 100644
--- a/resources/assets/js/pages/content/whatnowPrevisualizer.vue
+++ b/resources/assets/js/pages/content/whatnowPrevisualizer.vue
@@ -1,70 +1,183 @@
 <template>
-  <div class="previsualizer-container">
-    <div class="previsualizer-key-message">
-      <div class="previsualizer-key-message-head">
-        <div class="previsualizer-key-message-icon">
-          <b-img :src="hazardIcon('Animal')" class="rounded-circle" width="60" height="60"></b-img>
+  <div>
+    <div class="modal-content" ref="modalContent">
+      <div class="modal-header">
+        <div class="logo-section">
+          <img v-if="selectedSoc.imageUrl" :src="selectedSoc.imageUrl" class="logo" />
+          <span>{{selectedSoc.name}}</span>
         </div>
-        <h4>
-          <span>Coastal Flood Safety Messages</span>
-        </h4>
+        <div v-if="contributors" class="contributors-container">
+          <div v-for="(contributor, index) in contributors" :key="'contributor-logo-'+index" class="contributor">
+            <img :src="contributor.logo" v-if="contributor.logo" />
+          </div>
+        </div>
+      </div>
+
+      <div class="main-container">
+        <div class="card-content">
+            <div class="title-section">
+            <div class="previsualizer-key-message-icon small-icon icon-spacing">
+              <b-img :src="hazardIcon(eventType)" class="rounded-circle" width="40" height="40"></b-img>
+            </div>
+            <h4>{{title}}</h4>
+          </div>
+          <hr>
+          <h3>{{ $t('stages.'+stageName) }}</h3>
+          <hr>
+          <div v-for="(message, index) in keyMessage" :key="index" class="safety-message">
+            <p><strong>{{ message.title }}</strong></p>
+            <ul v-if="message.content && message.content?.length">
+              <li v-for="(item, i) in message.content" :key="i">{{ item }}</li>
+            </ul>
+          </div>
+        </div> 
       </div>
     </div>
+    <div class="button-container">
+      <b-dropdown id="download-dropdown" :text="$t('common.download')" class="primary" variant="outline-primary">
+        <b-dropdown-item @click="downloadAsPNG"> {{ $t('common.download_as_image') }} </b-dropdown-item>
+        <b-dropdown-item @click="downloadAsPDF">{{ $t('common.download_as_pdf') }}</b-dropdown-item>
+      </b-dropdown>
+    </div>
   </div>
 </template>
 
-
 <script>
+import html2canvas from 'html2canvas'
+import jsPDF from 'jspdf'
 
 export default {
-  props: ['entityId', 'published'],
-  data () {
+  props: ['eventType', 'keyMessage', 'stageName', 'title', 'description', 'contributors', 'selectedSoc', 'selectedLanguage'],
+  data() {
     return {
+      contributors: [],
     }
   },
-  methods: {
-  },
-  mounted () {
+  mounted() {
+    if (this.selectedSoc.translations) {
+      const translation = this.selectedSoc.translations.filter((translation) => translation.languageCode === this.selectedLanguage);
+      if (translation.length) {
+        this.contributors = translation[0].contributors;
+      }
+    }
   },
-  computed: {
-  }
-}
+  methods: {
+    async downloadAsPNG() {
+      const element = this.$refs.modalContent
+      const canvas = await html2canvas(element, { allowTaint: true, useCORS: true, logging: true })
+      const link = document.createElement('a')
+      link.href = canvas.toDataURL('image/png')
+      const fileName = this.selectedSoc.name+'_'+this.stageName+'_'+this.eventType+'_'+this.title+".png";
+      link.download = fileName
+      link.click()
+    },
+    async downloadAsPDF() {
+      const element = this.$refs.modalContent;
+
+      const canvas = await html2canvas(element, {
+        scale: window.devicePixelRatio,
+        useCORS: true
+      });
 
+      const imgData = canvas.toDataURL("image/png");
+      const pdf = new jsPDF({
+        orientation: "portrait",
+        unit: "mm",
+        format: "a4"
+      });
 
+      const imgWidth = 210;
+      const imgHeight = (canvas.height * imgWidth) / canvas.width;
+      const fileName = this.selectedSoc.name+'_'+this.stageName+'_'+this.eventType+'_'+this.title+".pdf";
+      pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight);
+      pdf.save(fileName);
+    }
+  }
+}
 </script>
 
-<style lang="scss" scoped>
-.previsualizer-container {
-  background: #ffffff;
-  padding: 56px 68px;
+<style scoped lang="scss">
+
+.card-content {
+  background: #fff;
+  padding: 30px;
+  width: auto;
+  border-radius: 8px;
+  border-radius: 10px;
+  border: solid 1.5px #e6e6e6;
 }
 
-.previsualizer-key-message {
-  min-width: 1100px;
 
-  .previsualizer-key-message-head {
+.modal-content {
+  background: #fff;
+  width: auto;
+  border-radius: 8px;
+  box-shadow: none;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 50px;
+  .contributors-container {
     display: flex;
     align-items: center;
-    padding: 33px 50px 70px 50px;
-    gap: 40px;
-    position: relative;
-
-    h4 {
-      font-size: 30px;
-      font-weight: 500;
-      color: #1e1e1e;
-    }
+    gap: 30px;
 
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      bottom: 0;
-      width: 90%;
-      height: 1px;
-      background: #cecece;
-      margin-top: 39px;
+    .contributor {
+      padding: 0 40px;
+      border-left: 1px solid #cecece;
+      img {
+        width: 30px;
+        height: auto;
+      }
     }
   }
+
+}
+
+.logo-section {
+  display: flex;
+  align-items: center;
+}
+
+.logo {
+  width: 70px;
+  margin-right: 10px;
+}
+
+.main-container {
+  padding: 30px;
+}
+
+.title-section {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
 }
-</style>
\ No newline at end of file
+
+.icon-spacing {
+  margin-right: 10px;
+}
+
+.safety-message {
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+.safety-message:last-child {
+  border-bottom: none;
+}
+.button-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 30px;
+  margin-bottom: 10px;
+  padding: 20px;
+  border-top: 1px solid #cecece;
+
+}
+
+</style>
diff --git a/resources/lang/en.json b/resources/lang/en.json
index e86ff94..b47049e 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -319,7 +319,10 @@
     "duplicate_lang_error": "Sorry, the chosen language already exists",
     "duplicate_lang_description": "Please either edit the existing language or select a new language from the dropdown",
     "estimated_users": "Number of estimated users",
-    "upploading": "Uploading"
+    "upploading": "Uploading",
+    "download": "Download",
+    "download_as_image": "Download as an image",
+    "download_as_pdf": "Download as a PDF"
   },
   "banners": {
     "get_started_create": ", Get Started and Create Your First App",
@@ -427,6 +430,15 @@
     "drag_button_text": "Click or drag file to this area to upload",
     "button_text": "Upload"
   },
+  "stages": {
+    "immediate": "Immediate",
+    "warning": "Warning",
+    "anticipated": "Anticipated",
+    "assess_and_plan":"Assess and Plan",
+    "mitigate_risks":"Mitigate Risks",
+    "prepare_to_respond":"Prepare to Respond",
+    "recover": "Recover"
+  },
   "content": {
     "content": "Content",
     "audit_log": {