diff --git a/messages/frontend/de.msg b/messages/frontend/de.msg
new file mode 100644
index 000000000..f01c31640
--- /dev/null
+++ b/messages/frontend/de.msg
@@ -0,0 +1,4 @@
+FilesSelected: Dateien ausgewählt
+SelectFile: Datei auswählen
+SelectFiles: Datei(en) auswählen
+AsyncFormFailure: Da ist etwas schief gelaufen, das tut uns Leid. Falls das erneut passiert schicke uns gerne eine kurze Beschreibung dieses Ereignisses über das Hilfe-Widget rechts oben. Vielen Dank für deine Hilfe!
\ No newline at end of file
diff --git a/src/Foundation.hs b/src/Foundation.hs
index b834b1dab..39fcaf424 100644
--- a/src/Foundation.hs
+++ b/src/Foundation.hs
@@ -187,6 +187,7 @@ mkMessageVariant "UniWorX" "Campus" "messages/campus" "de"
 mkMessageVariant "UniWorX" "Dummy" "messages/dummy" "de"
 mkMessageVariant "UniWorX" "PWHash" "messages/pw-hash" "de"
 mkMessageVariant "UniWorX" "Button" "messages/button" "de"
+mkMessageVariant "UniWorX" "Frontend" "messages/frontend" "de"
 
 -- This instance is required to use forms. You can modify renderMessage to
 -- achieve customized and internationalized form validation messages.
@@ -1053,6 +1054,11 @@ siteLayout' headingOverride widget = do
       hasSecondaryPageActions = any (is _PageActionSecondary) $ toListOf (traverse . _1 . _menuItemType) menuTypes
       hasPrimaryPageActions = any (is _PageActionPrime) $ toListOf (traverse . _1 . _menuItemType) menuTypes
 
+  MsgRenderer mr <- getMsgRenderer
+  let
+    -- See Utils.Frontend.I18n and files in messages/frontend for message definitions
+    frontendI18n = toJSON (mr :: FrontendMessage -> Text)
+
   pc <- widgetToPageContent $ do
       -- 3rd party
       addScript $ StaticR js_vendor_flatpickr_js
diff --git a/src/Import/NoFoundation.hs b/src/Import/NoFoundation.hs
index 457682087..9302db552 100644
--- a/src/Import/NoFoundation.hs
+++ b/src/Import/NoFoundation.hs
@@ -15,7 +15,8 @@ import Yesod.Auth             as Import
 import Yesod.Core.Types       as Import (loggerSet)
 import Yesod.Default.Config2  as Import
 import Utils                  as Import
-import Utils.Modal            as Import
+import Utils.Frontend.Modal   as Import
+import Utils.Frontend.I18n    as Import
 import Yesod.Core.Json        as Import (provideJson)
 import Yesod.Core.Types.Instances as Import ()
 
diff --git a/src/Utils/Frontend/I18n.hs b/src/Utils/Frontend/I18n.hs
new file mode 100644
index 000000000..9c8533496
--- /dev/null
+++ b/src/Utils/Frontend/I18n.hs
@@ -0,0 +1,41 @@
+module Utils.Frontend.I18n
+  ( FrontendMessage(..)
+  ) where
+
+import ClassyPrelude
+import Data.Universe
+
+import Control.Lens
+import Utils.PathPiece
+
+import Web.PathPieces
+import Data.Aeson
+import Data.Aeson.Types (toJSONKeyText)
+import Data.Aeson.TH
+import qualified Data.Char as Char
+
+
+-- | I18n-Messages used in JavaScript-Frontend
+--
+-- Only nullary constructors are supported
+--
+-- @MsgCamelCaseIdentifier@ gets translated to @camelCaseIdentifier@ in Frontend (see `nullaryPathPiece` and `deriveJSON` below)
+data FrontendMessage = MsgFilesSelected
+                     | MsgSelectFile
+                     | MsgSelectFiles
+                     | MsgAsyncFormFailure
+  deriving (Eq, Ord, Enum, Bounded, Read, Show, Generic, Typeable)
+instance Universe FrontendMessage
+instance Finite FrontendMessage
+instance Hashable FrontendMessage
+
+nullaryPathPiece ''FrontendMessage $ over _head Char.toLower . mconcat . drop 1 . splitCamel
+
+deriveJSON defaultOptions
+  { constructorTagModifier = over _head Char.toLower . mconcat . drop 1 . splitCamel
+  } ''FrontendMessage
+
+instance ToJSONKey FrontendMessage where
+  toJSONKey = toJSONKeyText toPathPiece
+instance FromJSONKey FrontendMessage where
+  fromJSONKey = FromJSONKeyTextParser $ parseJSON . String
diff --git a/src/Utils/Modal.hs b/src/Utils/Frontend/Modal.hs
similarity index 97%
rename from src/Utils/Modal.hs
rename to src/Utils/Frontend/Modal.hs
index 14ce09965..79142ae4b 100644
--- a/src/Utils/Modal.hs
+++ b/src/Utils/Frontend/Modal.hs
@@ -1,4 +1,4 @@
-module Utils.Modal
+module Utils.Frontend.Modal
   ( Modal(..)
   , customModal
   , modal
diff --git a/templates/default-layout.julius b/templates/default-layout.julius
index 27a220a02..8c7295843 100644
--- a/templates/default-layout.julius
+++ b/templates/default-layout.julius
@@ -36,12 +36,7 @@ function setupDatepicker(wrapper) {
 }
 
 if (I18n) {
-  I18n.addMany({
-    filesSelected: 'Dateien ausgewählt',
-    selectFile: 'Datei auswählen',
-    selectFiles: 'Datei(en) auswählen',
-    asyncFormFailure: 'Da ist etwas schief gelaufen, das tut uns Leid. Falls das erneut passiert schicke uns gerne eine kurze Beschreibung dieses Ereignisses über das Hilfe-Widget rechts oben. Vielen Dank für deine Hilfe!',
-  });
+  I18n.addMany(#{frontendI18n});
 } else {
   throw new Error('I18n JavaScript service is missing!');
 }