Improve Chinese and English language files

2025-06-26 18:16:50 +00:00 · 2017-10-12 17:30:21 +08:00
parent bfae6f7937
commit a5129ff188
60 changed files with 793 additions and 973 deletions
--- a/config/i18n/en.yml
+++ b/config/i18n/en.yml
@@ -8,7 +8,36 @@ button.logout: Sign out
 button.search: Search
 button.submit: Submit
 button.cancel: Cancel
+button.confirm: Confirm
 button.delete: Delete
+button.prune: Prune
+button.new: New
+button.edit: Edit
+button.save: Save
+button.update: Update
+button.return: Return
+button.leave: Leave
+button.scale: Scale
+button.previous: Previous
+button.next: Next
+
+# field
+field.name: Name
+field.login-name: Login name
+field.password: Password
+field.id: ID
+field.tag: Tags
+field.size: Size
+field.created-at: Created at
+field.created-by: Created by
+field.updated-at: Updated at
+field.action: Action
+field.value: Value
+field.email: Email
+field.status: Status
+field.state: State
+field.type: Type
+field.image: Image

 # menu
 menu.dashboard: Dashboard
@@ -21,7 +50,10 @@ menu.registry: Registries
 menu.node: Nodes
 menu.network: Networks
 menu.service: Services
+menu.service.template: Templates
 menu.stack: Stacks
+menu.stack.task: Tasks
+menu.stack.archive: Archives
 menu.task: Tasks
 menu.secret: Secrets
 menu.config: Config
@@ -33,6 +65,16 @@ menu.event: Events
 menu.version: Version
 menu.profile: Profile
 menu.password: Password
+menu.detail: Detail
+menu.raw: Raw
+menu.edit: Edit
+menu.log: Logs
+
+# login page
+login.title: Sign in to Swirl
+login.name: Login Name
+login.password: Password
+login.forgot-password: Forgot password?

 # dashboard
 dashboard.node: Nodes
@@ -41,8 +83,75 @@ dashboard.service: Services
 dashboard.stack: Stacks
 dashboard.feature: Features

-# login page
-login.title: Sign in to Swirl
-login.name: Login Name
-login.password: Password
-login.forgot-password: Forgot password?
+# image pages
+image.title: Image
+image.description: An image packages all the files and settings required to run a container.
+image.placeholder.search: Search by name
+image.docker-version: version
+image.layer: Layers
+image.platform: Platform
+image.author: Author
+image.instruction: Instruction
+
+# container pages
+container.title: Container
+container.description: A container is a running instance of image.
+
+# volume pages
+volume.title: Volume
+volume.description: Create and manage persistent storage that can be attached to containers.
+
+# registry pages
+registry.title: Registry
+registry.description: A registry is a storage and content delivery system, holding named Docker images, available in different tagged versions.
+
+# node pages
+node.title: Node
+node.description: Nodes are instances of the Engine participating in a swarm.
+
+# network pages
+network.title: Network
+network.description: Networks are user-defined networks that containers can be attached to.
+
+# service pages
+service.title: Service
+service.description: Services are the definitions of tasks to run on a swarm.
+
+# service template pages
+service.template.title: Service Template
+service.template.description: Pre-defined service template to simplify similar service creation.
+service.template.button.create: Create service
+
+# stack pages
+stack.title: Stack
+stack.description: A stack is a logical grouping of related services that are usually deployed together and require each other to work as intended.
+
+# secret pages
+secret.title: Secret
+secret.description: Secrets are sensitive data that can be used by services.
+
+# config pages
+config.title: Config
+config.description: Configs are non-sensitive information that can be used by services, such as configuration files.
+
+# role pages
+role.title: Role
+role.description: A role is a user group with same rights. User can belong to multiple roles.
+
+# user pages
+user.title: User
+user.description: Manage users for using Swirl system.
+user.button.block: Block
+user.button.unblock: Unblock
+
+# setting pages
+setting.title: Setting
+setting.description: Manage Swirl system settings.
+
+# event pages
+event.title: Event
+event.description: Manage all user events.
+
+# profile pages
+profile.title: Profile
+profile.description: User profiles.
--- a/config/i18n/zh.yml
+++ b/config/i18n/zh.yml
@@ -8,7 +8,36 @@ button.logout: 登出
 button.search: 搜索
 button.submit: 提交
 button.cancel: 取消
+button.confirm: 确定
 button.delete: 删除
+button.prune: 清理
+button.new: 新建
+button.edit: 编辑
+button.save: 保存
+button.update: 更新
+button.return: 返回
+button.leave: 离开
+button.scale: 调整
+button.previous: 前一页
+button.next: 后一页
+
+# field
+field.name: 名称
+field.login-name: 登录名称
+field.password: 密码
+field.id: ID
+field.tag: 标签
+field.size: 大小
+field.created-at: 创建时间
+field.created-by: 创建人
+field.updated-at: 更新时间
+field.action: 操作
+field.value: 值
+field.email: 电子邮箱
+field.status: 状态
+field.state: 状态
+field.type: 类型
+field.image: 镜像

 # menu
 menu.dashboard: 仪表盘
@@ -21,7 +50,10 @@ menu.registry: 镜像仓库
 menu.node: 节点
 menu.network: 网络
 menu.service: 服务
+menu.service.template: 模板
 menu.stack: 编排
+menu.stack.task: 任务
+menu.stack.archive: 档案
 menu.task: 任务
 menu.secret: 私密配置
 menu.config: 常规配置
@@ -33,6 +65,16 @@ menu.event: 事件
 menu.version: 版本
 menu.profile: 资料
 menu.password: 密码
+menu.detail: 详情
+menu.raw: 原始
+menu.edit: 编辑
+menu.log: 日志
+
+# login page
+login.title: 登录到 Swirl
+login.name: 登录名
+login.password: 密码
+login.forgot-password: 忘记密码？

 # dashboard
 dashboard.node: 节点
@@ -41,8 +83,75 @@ dashboard.service: 服务
 dashboard.stack: 编排
 dashboard.feature: 功能

-# login page
-login.title: 登录到 Swirl
-login.name: 登录名
-login.password: 密码
-login.forgot-password: 忘记密码？
+# image pages
+image.title: 镜像
+image.description: 镜像封装了支持一个容器运行所需的全部文件和设置。
+image.placeholder.search: 按名称搜索
+image.docker-version: 版本
+image.layer: 层
+image.platform: 平台
+image.author: 作者
+image.instruction: 指令
+
+# container pages
+container.title: 容器
+container.description: 容器是镜像的运行实例。
+
+# volume pages
+volume.title: 数据卷
+volume.description: 创建和管理能够附加到容器的持久化存储。
+
+# registry pages
+registry.title: 镜像仓库
+registry.description: 镜像仓库是一个存储和内容分发系统，包含了命名的 Docker 镜像，镜像版本以标签作区分。
+
+# node pages
+node.title: 节点
+node.description: 节点是加入到 Swarm 集群中的一个个 Docker 实例。
+
+# network pages
+network.title: 网络
+network.description: 能够连接到容器的 Docker 预置和用户自定义的网络集合。
+
+# service pages
+service.title: 服务
+service.description: 服务是在 Swarm 集群中运行的任务定义。
+
+# service template pages
+service.template.title: 服务模板
+service.template.description: 用来简化创建相似服务的预定义模板。
+service.template.button.create: 创建服务
+
+# stack pages
+stack.title: 编排
+stack.description: 编排是相关服务的一个逻辑分组，这些服务通常互相依赖，需要一块部署。
+
+# secret pages
+secret.title: 私密配置
+secret.description: 运行服务需要的敏感数据，如密钥。
+
+# config pages
+config.title: 常规配置
+config.description: 运行服务需要的非敏感信息，如配置文件。
+
+# role pages
+role.title: 角色
+role.description: 角色是拥有相同权限的用户构成的逻辑组，同一个用户可以归属于多个角色。
+
+# user pages
+user.title: 用户
+user.description: 管理登录 Swirl 系统的用户。
+user.button.block: 锁定
+user.button.unblock: 解锁
+
+# setting pages
+setting.title: 设置
+setting.description: 管理 Swirl 系统设置。
+
+# event pages
+event.title: 事件
+event.description: 管理用户操作日志。
+
+# profile pages
+profile.title: 资料
+profile.description: 用户个人信息。
--- a/views/_modules/form.jet
+++ b/views/_modules/form.jet
@@ -39,8 +39,8 @@
 <table id="table-{{n}}s" class="table is-bordered is-striped is-narrow is-marginless is-fullwidth" data-name="{{name}}">
  <thead>
    <tr>
-      <th>Name</th>
-      <th>Value</th>
+      <th>{{ i18n("field.name") }}</th>
+      <th>{{ i18n("field.value") }}</th>
      <th width="48">
        <a class="button is-small is-success is-outlined" data-action="add-{{n}}">
          <span class="icon is-small">
@@ -81,8 +81,8 @@
 <table id="table-{{n}}s" class="table is-bordered is-striped is-narrow is-marginless is-fullwidth" data-name="{{name}}">
  <thead>
    <tr>
-      <th>Name</th>
-      <th>Value</th>
+      <th>{{ i18n("field.name") }}</th>
+      <th>{{ i18n("field.value") }}</th>
      <th width="48">
        <a class="button is-small is-success is-outlined" data-action="add-{{n}}">
          <span class="icon is-small">
@@ -119,10 +119,10 @@
 {{ block form_submit(url) }}
 <div class="field is-grouped">
  <div class="control">
-    <button type="submit" class="button is-primary">Submit</button>
+    <button type="submit" class="button is-primary">{{ i18n("button.submit") }}</button>
  </div>
  <div class="control">
-    <a href="{{ url }}" class="button is-link">Cancel</a>
+    <a href="{{ url }}" class="button is-link">{{ i18n("button.cancel") }}</a>
  </div>
 </div>
 {{ end }}
--- a/views/_modules/pager.jet
+++ b/views/_modules/pager.jet
@@ -1,7 +1,7 @@
 {{ block pager(info) }}
  <nav class="pagination is-centered">
-    <a class="pagination-previous" {{ if info.Page > 1 }}href="{{ info.URL(info.Page-1) }}"{{ else }}disabled{{ end }}>Previous</a>
-    <a class="pagination-next" {{ if info.Page < info.MaxPage }}href="{{ info.URL(info.Page+1) }}"{{ else }}disabled{{ end }}>Next</a>
+    <a class="pagination-previous" {{ if info.Page > 1 }}href="{{ info.URL(info.Page-1) }}"{{ else }}disabled{{ end }}>{{ i18n("button.previous") }}</a>
+    <a class="pagination-next" {{ if info.Page < info.MaxPage }}href="{{ info.URL(info.Page+1) }}"{{ else }}disabled{{ end }}>{{ i18n("button.next") }}</a>
    <ul class="pagination-list">
      {{ range info.Pages }}
      <li>
--- a/views/_modules/service.jet
+++ b/views/_modules/service.jet
@@ -556,8 +556,8 @@
      </nav>
    </section>
    <footer class="modal-card-foot">
-      <button id="btn-add-{{ name }}" type="button" class="button is-primary">Confirm</button>
-      <button type="button" class="button dismiss">Cancel</button>
+      <button id="btn-add-{{ name }}" type="button" class="button is-primary">{{ i18n("button.confirm") }}</button>
+      <button type="button" class="button dismiss">{{ i18n("button.cancel") }}</button>
    </footer>
  </div>
 </div>
--- a/views/config/edit.jet
+++ b/views/config/edit.jet
@@ -9,12 +9,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        CONFIG
-      </h1>
-      <h2 class="subtitle is-5">
-        Configs are non-sensitive information that can be used by services, such as configuration files.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("config.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("config.description") }}</h2>
    </div>
  </div>
 </section>
@@ -22,9 +18,9 @@
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/config/">Configs</a></li>
-      <li class="is-active"><a>Edit</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/config/">{{ i18n("menu.config") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.edit") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -43,7 +39,7 @@
    <div class="navbar-brand">
      {*<a class="navbar-item is-tab" href="/config/{{.Config.ID}}/detail">Detail</a>*}
      {*<a class="navbar-item is-tab" href="/config/{{.Config.ID}}/raw">Raw</a>*}
-      <a class="navbar-item is-tab is-active" href="/node/{{.Config.ID}}/edit">Edit</a>
+      <a class="navbar-item is-tab is-active" href="/node/{{.Config.ID}}/edit">{{ i18n("menu.edit") }}</a>
    </div>
  </div>
 </nav>
@@ -62,14 +58,7 @@
        <label class="label">Labels</label>
        {{ yield options(name="label", items=.Config.Spec.Labels) }}
      </div>
-      <div class="field is-grouped">
-        <div class="control">
-          <button type="submit" class="button is-primary">Submit</button>
-        </div>
-        <div class="control">
-          <a href="/config/" class="button is-link">Cancel</a>
-        </div>
-      </div>
+      {{ yield form_submit(url="/config/") }}
    </form>
  </div>
 </section>
--- a/views/config/list.jet
+++ b/views/config/list.jet
@@ -9,12 +9,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        CONFIG
-      </h1>
-      <h2 class="subtitle is-5">
-        Configs are non-sensitive information that can be used by services, such as configuration files.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("config.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("config.description") }}</h2>
    </div>
  </div>
 </section>
@@ -29,24 +25,25 @@
              <input name="name" value="{{.Name}}" class="input" type="text" placeholder="Search by name">
            </p>
            <p class="control">
-              <button class="button is-primary">Search</button>
+              <button class="button is-primary">{{ i18n("button.search") }}</button>
            </p>
          </div>
        </form>
      </div>
      <div class="level-item">
        <p class="subtitle is-5">
-          <strong>{{.Pager.Count}}</strong> configs
+          <strong>{{.Pager.Count}}</strong>
+          <span class="is-lowercase">{{ i18n("menu.config") }}</span>
        </p>
      </div>      
    </div>
    <!-- Right side -->
    <div class="level-right">
      <p class="level-item">
-        <button id="btn-delete" class="button is-danger"><span class="icon"><i class="fa fa-remove"></i></span><span>Delete</span></button>
+        <button id="btn-delete" class="button is-danger"><span class="icon"><i class="fa fa-remove"></i></span><span>{{ i18n("button.delete") }}</span></button>
      </p>
      <p class="level-item">
-        <a href="new" class="button is-success"><span class="icon"><i class="fa fa-plus"></i></span><span>New</span></a>
+        <a href="new" class="button is-success"><span class="icon"><i class="fa fa-plus"></i></span><span>{{ i18n("button.new") }}</span></a>
      </p>
    </div>
  </nav>
@@ -55,11 +52,11 @@
      <thead>
          <tr>
            <th width="30"><input type="checkbox" data-action="check-all"></th>
-            <th>Name</th>
-            <th>ID</th>
-            <th>Created</th>
-            <th>Updated</th>
-            <th>Action</th>
+            <th>{{ i18n("field.name") }}</th>
+            <th>{{ i18n("field.id") }}</th>
+            <th>{{ i18n("field.created-at") }}</th>
+            <th>{{ i18n("field.updated-at") }}</th>
+            <th>{{ i18n("field.action") }}</th>
          </tr>
      </thead>
      <tbody>
@@ -71,8 +68,8 @@
            <td>{{time(.CreatedAt)}}</td>
            <td>{{time(.UpdatedAt)}}</td>
            <td>
-              <a href="{{.ID}}/edit" class="button is-small is-dark is-outlined">Edit</a>
-              <button class="button is-small is-danger is-outlined" data-action="delete-config">Delete</button>
+              <a href="{{.ID}}/edit" class="button is-small is-dark is-outlined">{{ i18n("button.edit") }}</a>
+              <button class="button is-small is-danger is-outlined" data-action="delete-config">{{ i18n("button.delete") }}</button>
            </td>
          </tr>
          {{end}}          
--- a/views/config/new.jet
+++ b/views/config/new.jet
@@ -9,23 +9,19 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        CONFIG
-      </h1>
-      <h2 class="subtitle is-5">
-        Configs are non-sensitive information that can be used by services, such as configuration files.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("config.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("config.description") }}</h2>
    </div>
  </div>
 </section>

 <section class="section">
-  <h2 class="title">Create config</h1>
+  <h2 class="title">Create config</h2>
  <hr>
  <form method="post" data-form="ajax-json" data-url="/config/">
    <div class="field is-horizontal">
      <div class="field-label is-normal">
-        <label class="label">Name</label>
+        <label class="label">{{ i18n("field.name") }}</label>
      </div>
      <div class="field-body">
        <div class="field">
@@ -63,8 +59,8 @@
      <div class="field-body">
        <div class="field">
          <div class="control">
-            <button type="submit" class="button is-primary">Submit</button>
-            <a href="/config/" class="button is-link">Cancel</a>
+            <button type="submit" class="button is-primary">{{ i18n("button.submit") }}</button>
+            <a href="/config/" class="button is-link">{{ i18n("button.cancel") }}</a>
          </div>
        </div>
      </div>
--- a/views/container/detail.jet
+++ b/views/container/detail.jet
@@ -5,12 +5,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        CONTAINER
-      </h1>
-      <h2 class="subtitle is-5">
-        A container is a running instance of image.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("container.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("container.description") }}</h2>
    </div>
  </div>
 </section>
@@ -18,9 +14,9 @@
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/container/">Containers</a></li>
-      <li class="is-active"><a>Detail</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/container/">{{ i18n("menu.container") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.detail") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -38,9 +34,9 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab is-active" href="/container/{{.Container.ContainerJSONBase.ID}}/detail">Detail</a>
-      <a class="navbar-item is-tab" href="/container/{{.Container.ContainerJSONBase.ID}}/raw">Raw</a>
-      <a class="navbar-item is-tab" href="/container/{{.Container.ContainerJSONBase.ID}}/logs">Logs</a>
+      <a class="navbar-item is-tab is-active" href="/container/{{.Container.ContainerJSONBase.ID}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab" href="/container/{{.Container.ContainerJSONBase.ID}}/raw">{{ i18n("menu.raw") }}</a>
+      <a class="navbar-item is-tab" href="/container/{{.Container.ContainerJSONBase.ID}}/logs">{{ i18n("menu.log") }}</a>
    </div>
  </div>
 </nav>
@@ -50,11 +46,11 @@
    <div class="message is-primary">
      <div class="message-body">
        <dl class="is-horizontal is-marginless">
-          <dt class="has-text-left">ID</dt>
+          <dt class="has-text-left">{{ i18n("field.id") }}</dt>
          <dd>{{ .Container.ContainerJSONBase.ID }}</dd>
          {{ yield desc(title="PID", value=.Container.ContainerJSONBase.State.Pid) }}
-          {{ yield desc(title="Image", value=.Container.ContainerJSONBase.Image) }}
-          {{ yield desc(title="Created at", value=.Container.ContainerJSONBase.Created) }}
+          {{ yield desc(title=i18n("field.image"), value=.Container.ContainerJSONBase.Image) }}
+          {{ yield desc(title=i18n("field.created-at"), value=.Container.ContainerJSONBase.Created) }}
          {{ yield desc(title="Started at", value=.Container.ContainerJSONBase.State.StartedAt) }}
          <dt class="has-text-left">Status</dt>
          <dd><span class="tag is-{{ .Container.ContainerJSONBase.State.Status == "running" ? "success" : "danger" }}">{{ .Container.ContainerJSONBase.State.Status }}</span></dd>
@@ -65,7 +61,7 @@
    {{ yield tags(title="Labels", tags=.Container.Config.Labels) }}
    <a href="/container/" class="button is-primary">
      <span class="icon"><i class="fa fa-reply"></i></span>
-      <span>Return</span>
+      <span>{{ i18n("button.return") }}</span>
    </a>
  </div>
 </section>
--- a/views/container/list.jet
+++ b/views/container/list.jet
@@ -9,12 +9,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        CONTAINER
-      </h1>
-      <h2 class="subtitle is-5">
-        A container is a running instance of image.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("container.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("container.description") }}</h2>
    </div>
  </div>
 </section>
@@ -30,14 +26,14 @@
              <input name="name" value="{{.Name}}" class="input" placeholder="Search by name">
            </p>
            <p class="control">
-              <button class="button is-primary">Search</button>
+              <button class="button is-primary">{{ i18n("button.search") }}</button>
            </p>
          </div>
        </form>
      </div>
      <div class="level-item">
        <p class="subtitle is-5">
-          <strong>{{.Pager.Count}}</strong> containers
+          <strong>{{.Pager.Count}}</strong> <span class="is-lowercase">{{ i18n("menu.container") }}</span>
        </p>
      </div>      
    </div>
@@ -58,7 +54,7 @@
        {{end}}
      </p>
      <p class="level-item">
-        <button id="btn-delete" class="button is-danger"><span class="icon"><i class="fa fa-remove"></i></span><span>Delete</span></button>
+        <button id="btn-delete" class="button is-danger"><span class="icon"><i class="fa fa-remove"></i></span><span>{{ i18n("button.delete") }}</span></button>
      </p>
    </div>
  </nav>
@@ -67,11 +63,11 @@
    <thead>
      <tr>
        <th width="30"><input type="checkbox" data-action="check-all"></th>
-        <th>Name</th>
-        <th>Image</th>
-        <th>State</th>
-        <th>Created</th>
-        <th>Action</th>
+        <th>{{ i18n("field.name") }}</th>
+        <th>{{ i18n("field.image") }}</th>
+        <th>{{ i18n("field.state") }}</th>
+        <th>{{ i18n("field.created-at") }}</th>
+        <th>{{ i18n("field.action") }}</th>
      </tr>
    </thead>
    <tbody>
@@ -84,7 +80,7 @@
        <td>{{ time(.CreatedAt) }}</td>
        <td>
          <div class="field has-addons">
-            <p class="control"><button class="button is-small is-danger is-outlined" data-action="delete-container">Delete</button></p>
+            <p class="control"><button class="button is-small is-danger is-outlined" data-action="delete-container">{{ i18n("button.delete") }}</button></p>
          </div>
        </td>
      </tr>          
--- a/views/container/logs.jet
+++ b/views/container/logs.jet
@@ -4,12 +4,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        CONTAINER
-      </h1>
-      <h2 class="subtitle is-5">
-        A container is a running instance of image.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("container.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("container.description") }}</h2>
    </div>
  </div>
 </section>
@@ -17,9 +13,9 @@
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/container/">Containers</a></li>
-      <li class="is-active"><a>Raw</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/container/">{{ i18n("menu.container") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.log") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -37,9 +33,9 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab" href="/container/{{.Container.ContainerJSONBase.ID}}/detail">Detail</a>
-      <a class="navbar-item is-tab" href="/container/{{.Container.ContainerJSONBase.ID}}/raw">Raw</a>
-      <a class="navbar-item is-tab is-active" href="/container/{{.Container.ContainerJSONBase.ID}}/logs">Logs</a>
+      <a class="navbar-item is-tab" href="/container/{{.Container.ContainerJSONBase.ID}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab" href="/container/{{.Container.ContainerJSONBase.ID}}/raw">{{ i18n("menu.raw") }}</a>
+      <a class="navbar-item is-tab is-active" href="/container/{{.Container.ContainerJSONBase.ID}}/logs">{{ i18n("menu.log") }}</a>
    </div>
  </div>
 </nav>
@@ -68,7 +64,7 @@
          <div class="level-item">
            <div class="field">
              <p class="control">
-                <button class="button is-primary">Search</button>
+                <button class="button is-primary">{{ i18n("button.search") }}</button>
              </p>
            </div>
          </div>
@@ -100,7 +96,7 @@
    </div>
    <a href="/service/" class="button is-primary">
      <span class="icon"><i class="fa fa-reply"></i></span>
-      <span>Return</span>
+      <span>{{ i18n("button.return") }}</span>
    </a>
  </div>
 </section>
--- a/views/container/raw.jet
+++ b/views/container/raw.jet
@@ -13,21 +13,17 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        CONTAINER
-      </h1>
-      <h2 class="subtitle is-5">
-        A container is a running instance of image.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("container.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("container.description") }}</h2>
    </div>
  </div>
 </section>
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/container/">Containers</a></li>
-      <li class="is-active"><a>Raw</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/container/">{{ i18n("menu.container") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.raw") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -43,9 +39,9 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab" href="/container/{{.Container.ContainerJSONBase.ID}}/detail">Detail</a>
-      <a class="navbar-item is-tab is-active" href="/container/{{.Container.ContainerJSONBase.ID}}/raw">Raw</a>
-      <a class="navbar-item is-tab" href="/container/{{.Container.ContainerJSONBase.ID}}/logs">Logs</a>
+      <a class="navbar-item is-tab" href="/container/{{.Container.ContainerJSONBase.ID}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab is-active" href="/container/{{.Container.ContainerJSONBase.ID}}/raw">{{ i18n("menu.raw") }}</a>
+      <a class="navbar-item is-tab" href="/container/{{.Container.ContainerJSONBase.ID}}/logs">{{ i18n("menu.log") }}</a>
    </div>
  </div>
 </nav>
@@ -56,7 +52,7 @@
    </div>
    <a href="/container/" class="button is-primary">
      <span class="icon"><i class="fa fa-reply"></i></span>
-      <span>Return</span>
+      <span>{{ i18n("button.return") }}</span>
    </a>
  </div>
 </section>
--- a/views/image/detail.jet
+++ b/views/image/detail.jet
@@ -5,12 +5,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        IMAGE
-      </h1>
-      <h2 class="subtitle is-5">
-        Manage images.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("image.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("image.description") }}</h2>
    </div>
  </div>
 </section>
@@ -18,9 +14,9 @@
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/image/">Images</a></li>
-      <li class="is-active"><a>Detail</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/image/">{{ i18n("menu.image") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.detail") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -38,12 +34,8 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab is-active" href="/image/{{ .Image.ID }}/detail">
-        Detail
-      </a>
-      <a class="navbar-item is-tab" href="/image/{{ .Image.ID }}/raw">
-        Raw
-      </a>
+      <a class="navbar-item is-tab is-active" href="/image/{{ .Image.ID }}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab" href="/image/{{ .Image.ID }}/raw">{{ i18n("menu.raw") }}</a>
    </div>
  </div>
 </nav>
@@ -54,22 +46,22 @@
    <div class="message is-primary">
      <div class="message-body">
        <dl class="is-horizontal is-marginless">
-          <dt class="has-text-left">ID</dt>
+          <dt class="has-text-left">{{ i18n("field.id") }}</dt>
          <dd>{{ .Image.ID }}</dd>
-          <dt class="has-text-left">Size</dt>
+          <dt class="has-text-left">{{ i18n("field.size") }}</dt>
          <dd>{{ printf("%0.1f", .Image.Size / 1024 / 1024) }} MB</dd>
-          <dt class="has-text-left">Created at</dt>
+          <dt class="has-text-left">{{ i18n("field.created-at") }}</dt>
          <dd>{{ .Image.Created }}</dd>
-          <dt class="has-text-left">Docker version</dt>
+          <dt class="has-text-left">Docker {{ i18n("image.docker-version") }}</dt>
          <dd>{{ .Image.DockerVersion }}</dd>
-          <dt class="has-text-left">Platform</dt>
+          <dt class="has-text-left">{{ i18n("image.platform") }}</dt>
          <dd>{{ .Image.Os }}/{{ .Image.Architecture }}</dd>
          {{ if .Image.Author }}
-          <dt class="has-text-left">Author</dt>
+          <dt class="has-text-left">{{ i18n("image.author") }}</dt>
          <dd>{{ .Image.Author }}</dd>
          {{ end }}
          {{ if .Image.RepoTags }}
-          <dt class="has-text-left">Tags</dt>
+          <dt class="has-text-left">{{ i18n("field.tag") }}</dt>
          {{ range .Image.RepoTags }}
          <dd><span class="tag is-success">{{ . }}</span></dd>
          {{ end }}
@@ -81,14 +73,14 @@
    {{ if .Histories }}
    <div class="block">
      <div class="block-header">
-        <p>Layers</p>
+        <p>{{ i18n("image.layer") }}</p>
      </div>
      <div class="block-body is-paddingless">
        <table id="table-containers" class="table is-bordered is-striped is-narrow is-fullwidth is-marginless">
          <thead>
            <tr>
-              <th>Instruction</th>
-              <th>Size</th>
+              <th>{{ i18n("image.instruction") }}</th>
+              <th>{{ i18n("field.size") }}</th>
            </tr>
          </thead>
          <tbody>
@@ -106,7 +98,7 @@

    <a href="/image/" class="button is-primary">
      <span class="icon"><i class="fa fa-reply"></i></span>
-      <span>Return</span>
+      <span>{{ i18n("button.return") }}</span>
    </a>
  </div>
 </section>
--- a/views/image/list.jet
+++ b/views/image/list.jet
@@ -9,12 +9,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        IMAGE
-      </h1>
-      <h2 class="subtitle is-5">
-        Manage images.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("image.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("image.description") }}</h2>
    </div>
  </div>
 </section>
@@ -27,24 +23,25 @@
        <form>
          <div class="field has-addons">
            <p class="control">
-              <input name="name" value="{{.Name}}" class="input" placeholder="Search by name">
+              <input name="name" value="{{.Name}}" class="input" placeholder="{{ i18n("image.placeholder.search") }}">
            </p>
            <p class="control">
-              <button class="button is-primary">Search</button>
+              <button class="button is-primary">{{ i18n("button.search") }}</button>
            </p>
          </div>
        </form>
      </div>
      <div class="level-item">
        <p class="subtitle is-5">
-          <strong>{{.Pager.Count}}</strong> images
+          <strong>{{.Pager.Count}}</strong>
+          <span class="is-lowercase">{{ i18n("menu.image") }}</span>
        </p>
      </div>      
    </div>
    <!-- Right side -->
    <div class="level-right">
      <p class="level-item">
-        <button id="btn-delete" class="button is-danger"><span class="icon"><i class="fa fa-remove"></i></span><span>Delete</span></button>
+        <button id="btn-delete" class="button is-danger"><span class="icon"><i class="fa fa-remove"></i></span><span>{{ i18n("button.delete") }}</span></button>
      </p>
    </div>
  </nav>
@@ -53,11 +50,11 @@
    <thead>
      <tr>
        <th width="30"><input type="checkbox" data-action="check-all"></th>
-        <th>ID</th>
-        <th>Tags</th>
-        <th>Size</th>
-        <th>Created</th>
-        <th>Action</th>
+        <th>{{ i18n("field.id") }}</th>
+        <th>{{ i18n("field.tag") }}</th>
+        <th>{{ i18n("field.size") }}</th>
+        <th>{{ i18n("field.created-at") }}</th>
+        <th>{{ i18n("field.action") }}</th>
      </tr>
    </thead>
    <tbody>
@@ -75,7 +72,7 @@
        <td>{{ printf("%0.1f", .Size / 1024 / 1024) }} MB</td>
        <td>{{ time(.CreatedAt) }}</td>
        <td>
-          <button class="button is-small is-danger is-outlined" data-action="delete-image">Delete</button>
+          <button class="button is-small is-danger is-outlined" data-action="delete-image">{{ i18n("button.delete") }}</button>
        </td>
      </tr>          
      {{end}}
--- a/views/image/raw.jet
+++ b/views/image/raw.jet
@@ -13,12 +13,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        IMAGE
-      </h1>
-      <h2 class="subtitle is-5">
-        Manage images.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("image.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("image.description") }}</h2>
    </div>
  </div>
 </section>
@@ -26,9 +22,9 @@
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/image/">Images</a></li>
-      <li class="is-active"><a>Raw</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/image/">{{ i18n("menu.image") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.raw") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -46,12 +42,8 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab" href="/image/{{ .Image.ID }}/detail">
-        Detail
-      </a>
-      <a class="navbar-item is-tab is-active" href="/image/{{ .Image.ID }}/raw">
-        Raw
-      </a>
+      <a class="navbar-item is-tab" href="/image/{{ .Image.ID }}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab is-active" href="/image/{{ .Image.ID }}/raw">{{ i18n("menu.raw") }}</a>
    </div>
  </div>
 </nav>
@@ -63,7 +55,7 @@
    </div>
    <a href="/image/" class="button is-primary">
      <span class="icon"><i class="fa fa-reply"></i></span>
-      <span>Return</span>
+      <span>{{ i18n("button.return") }}</span>
    </a>
  </div>
 </section>
--- a/views/login.jet
+++ b/views/login.jet
@@ -9,7 +9,7 @@
          <form method="post" data-form="ajax-json">
            <div class="box">
              <div class="field">
-                <label class="label">{{ i18n("login.name") }}</label>
+                <label class="label">{{ i18n("field.login-name") }}</label>
                <p class="control has-icons-left">
                  <input name="name" class="input" type="text" placeholder="" data-v-rule="native" required>
                  <span class="icon is-small is-left">
@@ -18,7 +18,7 @@
                </p>
              </div>
              <div class="field">
-                <label class="label">{{ i18n("login.password") }}</label>
+                <label class="label">{{ i18n("field.password") }}</label>
                <p class="control has-icons-left">
                  <input name="password" class="input" type="password" data-v-rule="native" required>
                  <span class="icon is-small is-left">
--- a/views/network/detail.jet
+++ b/views/network/detail.jet
@@ -9,21 +9,17 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        NETWORK
-      </h1>
-      <h2 class="subtitle is-5">
-        Networks are user-defined networks that containers can be attached to.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("network.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("network.description") }}</h2>
    </div>
  </div>
 </section>
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/network/">Networks</a></li>
-      <li class="is-active"><a>Detail</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/network/">{{ i18n("menu.network") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.detail") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -39,12 +35,8 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab is-active" href="/network/{{.Network.Name}}/detail">
-        Detail
-      </a>
-      <a class="navbar-item is-tab" href="/network/{{.Network.Name}}/raw">
-        Raw
-      </a>
+      <a class="navbar-item is-tab is-active" href="/network/{{.Network.Name}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab" href="/network/{{.Network.Name}}/raw">{{ i18n("menu.raw") }}</a>
    </div>
  </div>
 </nav>
@@ -54,13 +46,13 @@
    <div class="message is-primary">
      <div class="message-body">
        <dl class="is-horizontal is-marginless">
-          <dt class="has-text-left">ID</dt>
+          <dt class="has-text-left">{{ i18n("field.id") }}</dt>
          <dd>{{ .Network.ID }}</dd>
          <dt class="has-text-left">Driver</dt>
          <dd>{{ .Network.Driver }}</dd>
          <dt class="has-text-left">Scope</dt>
          <dd>{{ .Network.Scope}}</dd>
-          <dt class="has-text-left">Created at</dt>
+          <dt class="has-text-left">{{ i18n("field.created-at") }}</dt>
          <dd>{{ time(.Network.Created) }}</dd>
          {{ if .Network.IPAM.Config }}
          <dt class="has-text-left">IP</dt>
@@ -84,11 +76,11 @@
        <table id="table-containers" class="table is-bordered is-striped is-narrow is-fullwidth is-marginless">
          <thead>
            <tr>
-              <th>Name</th>
+              <th>{{ i18n("field.name") }}</th>
              <th>IPV4</th>
              <th>IPV6</th>
              <th>Mac</th>
-              <th>Action</th>
+              <th>{{ i18n("field.action") }}</th>
            </tr>
          </thead>
          <tbody>
@@ -99,7 +91,7 @@
              <td>{{c.IPv6Address}}</td>
              <td>{{c.MacAddress}}</td>
              <td>
-                <button class="button is-small is-danger is-outlined" data-action="disconnect" value="{{id}}">Leave</button>
+                <button class="button is-small is-danger is-outlined" data-action="disconnect" value="{{id}}">{{ i18n("button.leave") }}</button>
              </td>
            </tr>
            {{end}}
@@ -111,7 +103,7 @@

    <a href="/network/" class="button is-primary">
      <span class="icon"><i class="fa fa-reply"></i></span>
-      <span>Return</span>
+      <span>{{ i18n("button.return") }}</span>
    </a>
  </div>
 </section>
--- a/views/network/list.jet
+++ b/views/network/list.jet
@@ -8,12 +8,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        NETWORK
-      </h1>
-      <h2 class="subtitle is-5">
-        Networks are user-defined networks that containers can be attached to.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("network.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("network.description") }}</h2>
    </div>
  </div>
 </section>
@@ -23,14 +19,15 @@
    <div class="level-left">
      <div class="level-item">
        <p class="subtitle is-5">
-          <strong>{{len(.Networks)}}</strong> networks
+          <strong>{{len(.Networks)}}</strong>
+          <span class="is-lowercase">{{ i18n("menu.network") }}</span>
        </p>
      </div>      
    </div>
    <!-- Right side -->
    <div class="level-right">
      <p class="level-item">
-        <a href="new" class="button is-success"><span class="icon"><i class="fa fa-plus"></i></span><span>New</span></a>
+        <a href="new" class="button is-success"><span class="icon"><i class="fa fa-plus"></i></span><span>{{ i18n("button.new") }}</span></a>
      </p>
    </div>
  </nav>
@@ -38,11 +35,11 @@
  <table id="table-items" class="table is-bordered is-striped is-narrow is-fullwidth">
      <thead>
          <tr>
-            <th>Name</th>
-            <th>ID</th>
+            <th>{{ i18n("field.name") }}</th>
+            <th>{{ i18n("field.id") }}</th>
            <th>Scope</th>
            <th>Driver</th>
-            <th>Action</th>
+            <th>{{ i18n("field.action") }}</th>
          </tr>
      </thead>
      <tbody>
@@ -53,7 +50,7 @@
            <td><span class="tag is-{{.Scope == "swarm" ? "info" : "grey"}}">{{.Scope}}</span></td>
            <td>{{.Driver}}</td>
            <td>
-              <button class="button is-small is-danger is-outlined" data-action="delete-network">Delete</button>
+              <button class="button is-small is-danger is-outlined" data-action="delete-network">{{ i18n("button.delete") }}</button>
            </td>
          </tr>
          {{end}}          
--- a/views/network/new.jet
+++ b/views/network/new.jet
@@ -9,12 +9,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        NETWORK
-      </h1>
-      <h2 class="subtitle is-5">
-        Networks are user-defined networks that containers can be attached to.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("network.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("network.description") }}</h2>
    </div>
  </div>
 </section>
@@ -27,7 +23,7 @@
      <div class="columns is-bottom-marginless">
        <div class="column is-6">
          <div class="field">
-            <label class="label">Name</label>
+            <label class="label">{{ i18n("field.name") }}</label>
            <div class="control">
              <input name="name" class="input" placeholder="Name" data-v-rule="native" required>
            </div>
@@ -114,14 +110,7 @@
        <legend class="lead is-5">Labels</legend>
        {{ yield options(name="label") }}
      </fieldset>
-      <div class="field is-grouped">
-          <div class="control">
-            <button type="submit" class="button is-primary">Submit</button>
-          </div>
-          <div class="control">
-            <a href="/network/" class="button is-link">Cancel</a>
-          </div>
-        </div>
+      {{ yield form_submit(url="/network/") }}
    </form>
  </div>
 </section>
--- a/views/network/raw.jet
+++ b/views/network/raw.jet
@@ -13,21 +13,17 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        NETWORK
-      </h1>
-      <h2 class="subtitle is-5">
-        Networks are user-defined networks that containers can be attached to.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("network.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("network.description") }}</h2>
    </div>
  </div>
 </section>
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/network/">Networks</a></li>
-      <li class="is-active"><a>Raw</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/network/">{{ i18n("menu.network") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.raw") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -43,12 +39,8 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab" href="/network/{{.Network}}/detail">
-        Detail
-      </a>
-      <a class="navbar-item is-tab is-active" href="/network/{{.Network}}/raw">
-        Raw
-      </a>
+      <a class="navbar-item is-tab" href="/network/{{.Network}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab is-active" href="/network/{{.Network}}/raw">{{ i18n("menu.raw") }}</a>
    </div>
  </div>
 </nav>
@@ -59,7 +51,7 @@
    </div>
    <a href="/network/" class="button is-primary">
      <span class="icon"><i class="fa fa-reply"></i></span>
-      <span>Return</span>
+      <span>{{ i18n("button.return") }}</span>
    </a>
  </div>
 </section>
--- a/views/node/detail.jet
+++ b/views/node/detail.jet
@@ -5,21 +5,17 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        NODE
-      </h1>
-      <h2 class="subtitle is-5">
-        Nodes are instances of the Engine participating in a swarm.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("node.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("node.description") }}</h2>
    </div>
  </div>
 </section>
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/node/">Nodes</a></li>
-      <li class="is-active"><a>Detail</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/node/">{{ i18n("menu.node") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.detail") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -36,9 +32,9 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab is-active" href="/node/{{.Node.ID}}/detail">Detail</a>
-      <a class="navbar-item is-tab" href="/node/{{.Node.ID}}/raw">Raw</a>
-      <a class="navbar-item is-tab" href="/node/{{.Node.ID}}/edit">Edit</a>
+      <a class="navbar-item is-tab is-active" href="/node/{{.Node.ID}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab" href="/node/{{.Node.ID}}/raw">{{ i18n("menu.raw") }}</a>
+      <a class="navbar-item is-tab" href="/node/{{.Node.ID}}/edit">{{ i18n("menu.edit") }}</a>
    </div>
  </div>
 </nav>
@@ -48,7 +44,7 @@
    <div class="message is-primary">
      <div class="message-body">
        <dl class="is-horizontal is-marginless">
-          <dt class="has-text-left">ID</dt>
+          <dt class="has-text-left">{{ i18n("field.id") }}</dt>
          <dd>{{ .Node.ID }}</dd>
          <dt class="has-text-left">Hostname</dt>
          <dd>{{ .Node.Description.Hostname }}</dd>
@@ -60,9 +56,9 @@
          <dd>{{ .Node.Status.State}}</dd>
          <dt class="has-text-left">Address</dt>
          <dd>{{ .Node.Status.Addr}}</dd>
-          <dt class="has-text-left">Created at</dt>
+          <dt class="has-text-left">{{ i18n("field.created-at") }}</dt>
          <dd>{{ time(.Node.CreatedAt) }}</dd>
-          <dt class="has-text-left">Updated at</dt>
+          <dt class="has-text-left">{{ i18n("field.updated-at") }}</dt>
          <dd>{{ time(.Node.UpdatedAt) }}</dd>
        </dl>
      </div>
@@ -90,7 +86,7 @@
          <dd>{{ .Node.ManagerStatus.Leader ? "Yes" : "No" }}</dd>
          <dt class="has-text-left">Reachability</dt>
          <dd>{{ .Node.ManagerStatus.Reachability }}</dd>
-          <dt class="has-text-left">Addr</dt>
+          <dt class="has-text-left">Address</dt>
          <dd>{{ .Node.ManagerStatus.Addr}}</dd>
        </dl>
      </div>
@@ -108,10 +104,10 @@
        <table class="table is-bordered is-striped is-narrow is-fullwidth is-marginless">
          <thead>
            <tr>
-              <th>ID</th>
-              <th>Status</th>
-              <th>Image</th>
-              <th>Updated at</th>
+              <th>{{ i18n("field.id") }}</th>
+              <th>{{ i18n("field.status") }}</th>
+              <th>{{ i18n("field.image") }}</th>
+              <th>{{ i18n("field.updated-at") }}</th>
            </tr>
          </thead>
          <tbody>
@@ -131,7 +127,7 @@

    <a href="/node/" class="button is-primary">
      <span class="icon"><i class="fa fa-reply"></i></span>
-      <span>Return</span>
+      <span>{{ i18n("button.return") }}</span>
    </a>
  </div>
 </section>
--- a/views/node/edit.jet
+++ b/views/node/edit.jet
@@ -9,12 +9,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        NODE
-      </h1>
-      <h2 class="subtitle is-5">
-        Nodes are instances of the Engine participating in a swarm.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("node.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("node.description") }}</h2>
    </div>
  </div>
 </section>
@@ -22,9 +18,9 @@
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/node/">Nodes</a></li>
-      <li class="is-active"><a>Edit</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/node/">{{ i18n("menu.node") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.edit") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -41,9 +37,9 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab" href="/node/{{.Node.ID}}/detail">Detail</a>
-      <a class="navbar-item is-tab" href="/node/{{.Node.ID}}/raw">Raw</a>
-      <a class="navbar-item is-tab is-active" href="/node/{{.Node.ID}}/edit">Edit</a>
+      <a class="navbar-item is-tab" href="/node/{{.Node.ID}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab" href="/node/{{.Node.ID}}/raw">{{ i18n("menu.raw") }}</a>
+      <a class="navbar-item is-tab is-active" href="/node/{{.Node.ID}}/edit">{{ i18n("menu.edit") }}</a>
    </div>
  </div>
 </nav>
@@ -53,7 +49,7 @@
    <form method="post" action="update" data-form="ajax-json" data-url="/node/">
      <input name="version" value="{{ .Node.Version.Index }}" data-type="integer" type="hidden">
      <div class="field">
-        <label class="label">Name</label>
+        <label class="label">{{ i18n("field.name") }}</label>
        <div class="control">
          <input name="name" value="{{ .Node.Spec.Name }}" class="input" placeholder="">
        </div>
@@ -77,14 +73,7 @@
        <legend class="lead is-5">Labels</legend>
        {{ yield options(name="label", items=.Node.Spec.Labels) }}
      </fieldset>
-      <div class="field is-grouped">
-        <div class="control">
-          <button type="submit" class="button is-primary">Submit</button>
-        </div>
-        <div class="control">
-          <a href="/node/" class="button is-link">Cancel</a>
-        </div>
-      </div>
+      {{ yield form_submit(url="/node/") }}
    </form>
  </div>
 </section>
--- a/views/node/list.jet
+++ b/views/node/list.jet
@@ -8,12 +8,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        NODE
-      </h1>
-      <h2 class="subtitle is-5">
-        Nodes are instances of the Engine participating in a swarm.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("node.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("node.description") }}</h2>
    </div>
  </div>
 </section>
@@ -24,7 +20,8 @@
    <div class="level-left">
      <div class="level-item">
        <p class="subtitle is-5">
-          <strong>{{len(.Nodes)}}</strong> nodes
+          <strong>{{len(.Nodes)}}</strong>
+          <span class="is-lowercase">{{ i18n("menu.node") }}</span>
        </p>
      </div>      
    </div>
@@ -33,14 +30,14 @@
  <table id="table-items" class="table is-bordered is-striped is-narrow is-fullwidth">
      <thead>
          <tr>
-            <th>Name</th>
+            <th>{{ i18n("field.name") }}</th>
            <th>Role</th>
            <th>Version</th>
            <th>CPU</th>
            <th>Memory</th>
            <th>Address</th>
-            <th>Status</th>
-            <th>Action</th>
+            <th>{{ i18n("field.status") }}</th>
+            <th>{{ i18n("field.action") }}</th>
          </tr>
      </thead>
      <tbody>
@@ -54,8 +51,8 @@
            <td>{{.Address}}</td>
            <td><span class="tag is-{{.Status == "ready" ? "success" : (.Status == "down" ? "danger" : "warning")}}">{{.Status}}</span></td>
            <td>
-              <a href="{{.ID}}/edit" class="button is-small is-dark is-outlined">Edit</a>
-              <button class="button is-small is-danger is-outlined" data-action="delete-node" value="{{.ID}}">Delete</button>
+              <a href="{{.ID}}/edit" class="button is-small is-dark is-outlined">{{ i18n("button.edit") }}</a>
+              <button class="button is-small is-danger is-outlined" data-action="delete-node" value="{{.ID}}">{{ i18n("button.delete") }}</button>
            </td>
          </tr>
          {{end}}          
--- a/views/node/raw.jet
+++ b/views/node/raw.jet
@@ -13,21 +13,17 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        NODE
-      </h1>
-      <h2 class="subtitle is-5">
-        Nodes are instances of the Engine participating in a swarm.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("node.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("node.description") }}</h2>
    </div>
  </div>
 </section>
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/node/">Nodes</a></li>
-      <li class="is-active"><a>Raw</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/node/">{{ i18n("menu.node") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.raw") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -44,9 +40,9 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab" href="/node/{{.Node.ID}}/detail">Detail</a>
-      <a class="navbar-item is-tab is-active" href="/node/{{.Node.ID}}/raw">Raw</a>
-      <a class="navbar-item is-tab" href="/node/{{.Node.ID}}/edit">Edit</a>
+      <a class="navbar-item is-tab" href="/node/{{.Node.ID}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab is-active" href="/node/{{.Node.ID}}/raw">{{ i18n("menu.raw") }}</a>
+      <a class="navbar-item is-tab" href="/node/{{.Node.ID}}/edit">{{ i18n("menu.edit") }}</a>
    </div>
  </div>
 </nav>
@@ -58,7 +54,7 @@
    </div>
    <a href="/node/" class="button is-primary">
      <span class="icon"><i class="fa fa-reply"></i></span>
-      <span>Return</span>
+      <span>{{ i18n("button.return") }}</span>
    </a>
  </div>
 </section>
--- a/views/profile/index.jet
+++ b/views/profile/index.jet
@@ -3,10 +3,8 @@
 <section class="hero is-primary">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">PROFILE</h1>
-      <h2 class="subtitle is-5">
-        User profiles.
-      </h2>      
+      <h1 class="title is-2 is-uppercase">{{ i18n("profile.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("profile.description") }}</h2>
    </div>
  </div>
  <div class="hero-foot">
@@ -14,10 +12,10 @@
      <nav class="tabs is-boxed">
        <ul>
          <li class="is-active">
-            <a href="/profile/">Profile</a>
+            <a href="/profile/">{{ i18n("menu.profile") }}</a>
          </li>
          <li>
-            <a href="/profile/password">Password</a>
+            <a href="/profile/password">{{ i18n("menu.password") }}</a>
          </li>
        </ul>
      </nav>
@@ -27,14 +25,12 @@

 <section class="section">
  <div class="container">
-    <h2 class="title has-text-centered">Main settings</h2>
-    <hr>
    <div class="columns">
      <div class="column is-6 is-offset-3">          
        <form method="post" data-form="ajax-json" data-message="The settings have been successfully modified">
          <div class="box is-radiusless">
            <div class="field">
-              <label class="label">Name</label>
+              <label class="label">{{ i18n("field.name") }}</label>
              <div class="field has-addons is-marginless">
                <div class="control">
                  <a class="button is-static">
@@ -49,7 +45,7 @@
              </div>
            </div>
            <div class="field">
-              <label class="label">Email</label>
+              <label class="label">{{ i18n("field.email") }}</label>
              <div class="field has-addons is-marginless">
                <div class="control">
                  <a class="button is-static">
@@ -66,7 +62,7 @@
            <hr>
            <div class="field">
              <p class="control">
-                <button class="button is-primary" type="submit">Update</button>
+                <button class="button is-primary" type="submit">{{ i18n("button.update") }}</button>
              </p>
            </div>
          </div>          
--- a/views/profile/password.jet
+++ b/views/profile/password.jet
@@ -3,10 +3,8 @@
 <section class="hero is-primary">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">PROFILE</h1>
-      <h2 class="subtitle is-5">
-        User profiles.
-      </h2>      
+      <h1 class="title is-2 is-uppercase">{{ i18n("profile.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("profile.description") }}</h2>
    </div>
  </div>
  <div class="hero-foot">
@@ -14,10 +12,10 @@
      <nav class="tabs is-boxed">
        <ul>
          <li>
-            <a href="/profile/">Profile</a>
+            <a href="/profile/">{{ i18n("menu.profile") }}</a>
          </li>
          <li class="is-active">
-            <a href="/profile/password">Password</a>
+            <a href="/profile/password">{{ i18n("menu.password") }}</a>
          </li>
        </ul>
      </nav>
@@ -27,8 +25,6 @@

 <section class="section">
  <div class="container">
-    <h2 class="title has-text-centered">Modify password</h2>
-    <hr>
    <div class="columns">
      <div class="column is-6 is-offset-3">          
        <form method="post" data-form="ajax-form" data-message="The password has been successfully modified">
@@ -69,7 +65,7 @@
            <hr>
            <div class="field">
              <p class="control">
-                <button class="button is-primary" type="submit">Update</button>
+                <button class="button is-primary" type="submit">{{ i18n("button.update") }}</button>
              </p>
            </div>
          </div>          
--- a/views/registry/list.jet
+++ b/views/registry/list.jet
@@ -8,12 +8,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        REGISTRY
-      </h1>
-      <h2 class="subtitle is-5">
-        A registry is a storage and content delivery system, holding named Docker images, available in different tagged versions.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("registry.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("registry.description") }}</h2>
    </div>
  </div>
 </section>
@@ -23,14 +19,14 @@
    <div class="level-left">
      <div class="level-item">
        <p class="subtitle is-5">
-          <strong>{{len(.Registries)}}</strong> registries
+          <strong>{{len(.Registries)}}</strong> <span class="is-lowercase">{{ i18n("menu.registry") }}</span>
        </p>
      </div>      
    </div>
    <!-- Right side -->
    <div class="level-right">
      <p class="level-item">
-        <button id="btn-new" class="button is-success modal-trigger" data-target="dlg-add"><span class="icon"><i class="fa fa-plus"></i></span><span>New</span></button>
+        <button id="btn-new" class="button is-success modal-trigger" data-target="dlg-add"><span class="icon"><i class="fa fa-plus"></i></span><span>{{ i18n("button.new") }}</span></button>
      </p>
    </div>
  </nav>
@@ -38,12 +34,12 @@
  <table id="table-items" class="table is-bordered is-striped is-narrow is-fullwidth">
      <thead>
          <tr>
-            <th>Name</th>
+            <th>{{ i18n("field.name") }}</th>
            <th>URL</th>
-            <th>Username</th>
-            <th>Created at</th>
-            <th>Updated at</th>
-            <th>Action</th>
+            <th>{{ i18n("field.login-name") }}</th>
+            <th>{{ i18n("field.created-at") }}</th>
+            <th>{{ i18n("field.updated-at") }}</th>
+            <th>{{ i18n("field.action") }}</th>
          </tr>
      </thead>
      <tbody>
@@ -55,8 +51,8 @@
            <td>{{time(.CreatedAt)}}</td>
            <td>{{time(.UpdatedAt)}}</td>
            <td>
-              <button class="button is-small is-dark is-outlined" data-action="edit-registry">Edit</button>
-              <button class="button is-small is-danger is-outlined" data-action="delete-registry">Delete</button>
+              <button class="button is-small is-dark is-outlined" data-action="edit-registry">{{ i18n("button.edit") }}</button>
+              <button class="button is-small is-danger is-outlined" data-action="delete-registry">{{ i18n("button.delete") }}</button>
            </td>
          </tr>
          {{end}}          
@@ -74,7 +70,7 @@
    <form method="post" action="create" data-form="ajax-json" data-url="-" data-message="Registry created.">
      <section class="modal-card-body">
        <div class="field">
-          <label class="label">Name</label>
+          <label class="label">{{ i18n("field.name") }}</label>
          <div class="control">
            <input name="name" class="input" type="text" placeholder="Name" data-v-rule="native" required>
          </div>
@@ -86,21 +82,21 @@
          </div>
        </div>
        <div class="field">
-          <label class="label">Username</label>
+          <label class="label">{{ i18n("field.login-name") }}</label>
          <div class="control">
            <input name="username" class="input" type="text" placeholder="Login account" data-v-rule="native" required>
          </div>
        </div>
        <div class="field">
-          <label class="label">Password</label>
+          <label class="label">{{ i18n("field.password") }}</label>
          <div class="control">
            <input name="password" class="input" type="password" placeholder="Login password" data-v-rule="native" required>
          </div>
        </div>                        
      </section>
      <footer class="modal-card-foot">
-        <button type="submit" class="button is-primary">Submit</button>
-        <button type="button" class="button dismiss">Cancel</button>
+        <button type="submit" class="button is-primary">{{ i18n("button.submit") }}</button>
+        <button type="button" class="button dismiss">{{ i18n("button.cancel") }}</button>
      </footer>
    </form>    
  </div>
@@ -116,7 +112,7 @@
      <input name="id" type="hidden">
      <section class="modal-card-body">
        <div class="field">
-          <label class="label">Name</label>
+          <label class="label">{{ i18n("field.name") }}</label>
          <div class="control">
            <input name="name" class="input" type="text" placeholder="Name" data-v-rule="native" required>
          </div>
@@ -128,21 +124,21 @@
          </div>
        </div>
        <div class="field">
-          <label class="label">Username</label>
+          <label class="label">{{ i18n("field.login-name") }}</label>
          <div class="control">
            <input name="username" class="input" type="text" placeholder="Login account" data-v-rule="native" required>
          </div>
        </div>
        <div class="field">
-          <label class="label">Password</label>
+          <label class="label">{{ i18n("field.password") }}</label>
          <div class="control">
            <input name="password" class="input" type="password" placeholder="Login password">
          </div>
        </div>                        
      </section>
      <footer class="modal-card-foot">
-        <button type="submit" class="button is-primary">Submit</button>
-        <button type="button" class="button dismiss">Cancel</button>
+        <button type="submit" class="button is-primary">{{ i18n("button.submit") }}</button>
+        <button type="button" class="button dismiss">{{ i18n("field.cancel") }}</button>
      </footer>
    </form>    
  </div>
--- a/views/secret/edit.jet
+++ b/views/secret/edit.jet
@@ -9,12 +9,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        SECRET
-      </h1>
-      <h2 class="subtitle is-5">
-        Secrets are sensitive data that can be used by services.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("secret.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("secret.description") }}</h2>
    </div>
  </div>
 </section>
@@ -22,9 +18,9 @@
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/secret/">Secrets</a></li>
-      <li class="is-active"><a>Edit</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/secret/">{{ i18n("menu.secret") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.edit") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -43,7 +39,7 @@
    <div class="navbar-brand">
      {*<a class="navbar-item is-tab" href="/secret/{{.Secret.ID}}/detail">Detail</a>*}
      {*<a class="navbar-item is-tab" href="/secret/{{.Secret.ID}}/raw">Raw</a>*}
-      <a class="navbar-item is-tab is-active" href="/node/{{.Secret.ID}}/edit">Edit</a>
+      <a class="navbar-item is-tab is-active" href="/node/{{.Secret.ID}}/edit">{{ i18n("menu.edit") }}</a>
    </div>
  </div>
 </nav>
@@ -56,14 +52,7 @@
        <label class="label">Labels</label>
        {{ yield options(name="label", items=.Secret.Spec.Labels) }}
      </div>
-      <div class="field is-grouped">
-        <div class="control">
-          <button type="submit" class="button is-primary">Submit</button>
-        </div>
-        <div class="control">
-          <a href="/secret/" class="button is-link">Cancel</a>
-        </div>
-      </div>
+      {{ yield form_submit(url="/secret/") }}
    </form>
  </div>
 </section>
--- a/views/secret/list.jet
+++ b/views/secret/list.jet
@@ -9,12 +9,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        SECRET
-      </h1>
-      <h2 class="subtitle is-5">
-        Secrets are sensitive data that can be used by services.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("secret.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("secret.description") }}</h2>
    </div>
  </div>
 </section>
@@ -29,24 +25,25 @@
              <input name="name" value="{{.Name}}" class="input" type="text" placeholder="Search by name">
            </p>
            <p class="control">
-              <button class="button is-primary">Search</button>
+              <button class="button is-primary">{{ i18n("button.search") }}</button>
            </p>
          </div>
        </form>
      </div>
      <div class="level-item">
        <p class="subtitle is-5">
-          <strong>{{.Pager.Count}}</strong> secrets
+          <strong>{{.Pager.Count}}</strong>
+          <span class="is-lowercase">{{ i18n("menu.secret") }}</span>
        </p>
      </div>      
    </div>
    <!-- Right side -->
    <div class="level-right">
      <p class="level-item">
-        <button id="btn-delete" class="button is-danger"><span class="icon"><i class="fa fa-remove"></i></span><span>Delete</span></button>
+        <button id="btn-delete" class="button is-danger"><span class="icon"><i class="fa fa-remove"></i></span><span>{{ i18n("button.delete") }}</span></button>
      </p>
      <p class="level-item">
-        <a href="new" class="button is-success"><span class="icon"><i class="fa fa-plus"></i></span><span>New</span></a>
+        <a href="new" class="button is-success"><span class="icon"><i class="fa fa-plus"></i></span><span>{{ i18n("button.new") }}</span></a>
      </p>
    </div>
  </nav>
@@ -55,11 +52,11 @@
      <thead>
          <tr>
            <th width="30"><input type="checkbox" data-action="check-all"></th>
-            <th>Name</th>
-            <th>ID</th>
-            <th>Created</th>
-            <th>Updated</th>
-            <th>Action</th>
+            <th>{{ i18n("field.name") }}</th>
+            <th>{{ i18n("field.id") }}</th>
+            <th>{{ i18n("field.created-at") }}</th>
+            <th>{{ i18n("field.updated-at") }}</th>
+            <th>{{ i18n("field.action") }}</th>
          </tr>
      </thead>
      <tbody>
@@ -71,8 +68,8 @@
            <td>{{time(.CreatedAt)}}</td>
            <td>{{time(.UpdatedAt)}}</td>
            <td>
-              <a href="{{.ID}}/edit" class="button is-small is-dark is-outlined">Edit</a>
-              <button class="button is-small is-danger is-outlined" data-action="delete-secret">Delete</button>
+              <a href="{{.ID}}/edit" class="button is-small is-dark is-outlined">{{ i18n("button.edit") }}</a>
+              <button class="button is-small is-danger is-outlined" data-action="delete-secret">{{ i18n("button.delete") }}</button>
            </td>
          </tr>
          {{end}}          
--- a/views/secret/new.jet
+++ b/views/secret/new.jet
@@ -9,23 +9,19 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        SECRET
-      </h1>
-      <h2 class="subtitle is-5">
-        Secrets are sensitive data that can be used by services.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("secret.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("secret.description") }}</h2>
    </div>
  </div>
 </section>

 <section class="section">
-  <h2 class="title">Create secret</h1>
+  <h2 class="title">Create secret</h2>
  <hr>
  <form method="post" data-form="ajax-json" data-url="/secret/">
    <div class="field is-horizontal">
      <div class="field-label is-normal">
-        <label class="label">Name</label>
+        <label class="label">{{ i18n("field.name") }}</label>
      </div>
      <div class="field-body">
        <div class="field">
@@ -63,8 +59,8 @@
      <div class="field-body">
        <div class="field">
          <div class="control">
-            <button type="submit" class="button is-primary">Submit</button>
-            <a href="/secret/" class="button is-link">Cancel</a>
+            <button type="submit" class="button is-primary">{{ i18n("button.submit") }}</button>
+            <a href="/secret/" class="button is-link">{{ i18n("button.cancel") }}</a>
          </div>
        </div>
      </div>
--- a/views/service/base.jet
+++ b/views/service/base.jet
@@ -4,12 +4,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        SERVICE
-      </h1>
-      <h2 class="subtitle is-5">
-        Services are the definitions of tasks to run on a swarm.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("service.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("service.description") }}</h2>
    </div>
  </div>
  <div class="hero-foot">
@@ -17,10 +13,10 @@
      <nav class="tabs is-boxed">
        <ul>
          <li class="is-active">
-            <a href="/service/">Services</a>
+            <a href="/service/">{{ i18n("menu.service") }}</a>
          </li>
          <li>
-            <a href="/service/template/">Templates</a>
+            <a href="/service/template/">{{ i18n("menu.service.template") }}</a>
          </li>
        </ul>
      </nav>
--- a/views/service/detail.jet
+++ b/views/service/detail.jet
@@ -5,9 +5,9 @@
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/service/">Services</a></li>
-      <li class="is-active"><a>Detail</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/service/">{{ i18n("menu.service") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.detail") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -25,10 +25,10 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab is-active" href="/service/{{.Service.Spec.Name}}/detail">Detail</a>
-      <a class="navbar-item is-tab" href="/service/{{.Service.Spec.Name}}/raw">Raw</a>
-      <a class="navbar-item is-tab" href="/service/{{.Service.Spec.Name}}/logs">Logs</a>
-      <a class="navbar-item is-tab" href="/service/{{.Service.Spec.Name}}/edit">Edit</a>
+      <a class="navbar-item is-tab is-active" href="/service/{{.Service.Spec.Name}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab" href="/service/{{.Service.Spec.Name}}/raw">{{ i18n("menu.raw") }}</a>
+      <a class="navbar-item is-tab" href="/service/{{.Service.Spec.Name}}/logs">{{ i18n("menu.log") }}</a>
+      <a class="navbar-item is-tab" href="/service/{{.Service.Spec.Name}}/edit">{{ i18n("menu.edit") }}</a>
    </div>
  </div>
 </nav>
@@ -40,7 +40,7 @@
      <dl class="is-horizontal is-marginless">
        <dt class="has-text-left">ID</dt>
        <dd>{{ .Service.ID }}</dd>
-        <dt class="has-text-left">Image</dt>
+        <dt class="has-text-left">{{ i18n("field.image") }}</dt>
        <dd>{{ .Service.Spec.TaskTemplate.ContainerSpec.Image }}</dd>
        <dt class="has-text-left">Mode</dt>
        <dd>
@@ -67,9 +67,9 @@
        <dt class="has-text-left">User</dt>
        <dd>{{ .Service.Spec.TaskTemplate.ContainerSpec.User }}</dd>
        {{ end }}
-        <dt class="has-text-left">Created at</dt>
+        <dt class="has-text-left">{{ i18n("field.created-at") }}</dt>
        <dd>{{ time(.Service.CreatedAt) }}</dd>
-        <dt class="has-text-left">Updated at</dt>
+        <dt class="has-text-left">{{ i18n("field.updated-at") }}</dt>
        <dd>{{ time(.Service.UpdatedAt) }}</dd>
      </dl>
      </div>
@@ -444,7 +444,7 @@

    <a href="/service/" class="button is-primary">
      <span class="icon"><i class="fa fa-reply"></i></span>
-      <span>Return</span>
+      <span>{{ i18n("button.return") }}</span>
    </a>
  </div>
 </section>
--- a/views/service/edit.jet
+++ b/views/service/edit.jet
@@ -9,9 +9,9 @@
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/service/">Services</a></li>
-      <li class="is-active"><a>Edit</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/service/">{{ i18n("menu.service") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.edit") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -25,10 +25,10 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab" href="/service/{{.Service.Name}}/detail">Detail</a>
-      <a class="navbar-item is-tab" href="/service/{{.Service.Name}}/raw">Raw</a>
-      <a class="navbar-item is-tab" href="/service/{{.Service.Name}}/logs">Logs</a>
-      <a class="navbar-item is-tab is-active" href="/service/{{.Service.Name}}/edit">Edit</a>
+      <a class="navbar-item is-tab" href="/service/{{.Service.Name}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab" href="/service/{{.Service.Name}}/raw">{{ i18n("menu.raw") }}</a>
+      <a class="navbar-item is-tab" href="/service/{{.Service.Name}}/logs">{{ i18n("menu.log") }}</a>
+      <a class="navbar-item is-tab is-active" href="/service/{{.Service.Name}}/edit">{{ i18n("menu.edit") }}</a>
    </div>
  </div>
 </nav>
--- a/views/service/list.jet
+++ b/views/service/list.jet
@@ -17,24 +17,25 @@
              <input name="name" value="{{.Name}}" class="input" placeholder="Search by name">
            </p>
            <p class="control">
-              <button class="button is-primary">Search</button>
+              <button class="button is-primary">{{ i18n("button.search") }}</button>
            </p>
          </div>
        </form>
      </div>
      <div class="level-item">
        <p class="subtitle is-5">
-          <strong>{{.Pager.Count}}</strong> services
+          <strong>{{.Pager.Count}}</strong>
+          <span class="is-lowercase">{{ i18n("menu.service") }}</span>
        </p>
      </div>      
    </div>
    <!-- Right side -->
    <div class="level-right">
      <p class="level-item">
-        <button id="btn-delete" class="button is-danger"><span class="icon"><i class="fa fa-remove"></i></span><span>Delete</span></button>
+        <button id="btn-delete" class="button is-danger"><span class="icon"><i class="fa fa-remove"></i></span><span>{{ i18n("button.delete") }}</span></button>
      </p>
      <p class="level-item">
-        <a class="button is-success" href="new"><span class="icon"><i class="fa fa-plus"></i></span><span>New</span></a>
+        <a class="button is-success" href="new"><span class="icon"><i class="fa fa-plus"></i></span><span>{{ i18n("button.new") }}</span></a>
      </p>
    </div>
  </nav>
@@ -43,11 +44,11 @@
    <thead>
      <tr>
        <th width="30"><input type="checkbox" data-action="check-all"></th>
-        <th>Name</th>
-        <th>Image</th>
+        <th>{{ i18n("field.name") }}</th>
+        <th>{{ i18n("field.image") }}</th>
        <th width="145">Mode</th>
-        <th>Updated</th>
-        <th width="110">Action</th>
+        <th>{{ i18n("field.updated-at") }}</th>
+        <th width="110">{{ i18n("field.action") }}</th>
      </tr>
    </thead>
    <tbody>
@@ -64,15 +65,15 @@
        </td>
        <td>{{time(.UpdatedAt)}}</td>
        <td>
-          <a href="{{.Name}}/edit" class="button is-small is-dark is-outlined tooltip is-tooltip-bottom" data-tooltip="Edit">
+          <a href="{{.Name}}/edit" class="button is-small is-dark is-outlined tooltip is-tooltip-bottom" data-tooltip="{{ i18n("button.edit") }}">
            <span class="icon"><i class="fa fa-edit"></i></span>
          </a>
          {{if .Mode == "replicated"}}
-          <button type="button" class="button is-small is-info is-outlined tooltip is-tooltip-bottom" data-tooltip="Scale" data-action="scale-service" data-replicas="{{.Replicas}}">
+          <button type="button" class="button is-small is-info is-outlined tooltip is-tooltip-bottom" data-tooltip="{{ i18n("button.scale") }}" data-action="scale-service" data-replicas="{{.Replicas}}">
            <span class="icon"><i class="fa fa-arrows"></i></span>
          </button>
          {{end}}
-          <button class="button is-small is-danger is-outlined tooltip is-tooltip-bottom" data-tooltip="Delete" data-action="delete-service">
+          <button class="button is-small is-danger is-outlined tooltip is-tooltip-bottom" data-tooltip="{{ i18n("button.delete") }}" data-action="delete-service">
            <span class="icon"><i class="fa fa-remove"></i></span>
          </button>
        </td>
--- a/views/service/logs.jet
+++ b/views/service/logs.jet
@@ -4,9 +4,9 @@
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/service/">Services</a></li>
-      <li class="is-active"><a>Logs</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/service/">{{ i18n("menu.service") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.log") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -24,10 +24,10 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab" href="/service/{{.Service}}/detail">Detail</a>
-      <a class="navbar-item is-tab" href="/service/{{.Service}}/raw">Raw</a>
-      <a class="navbar-item is-tab is-active" href="/service/{{.Service}}/logs">Logs</a>
-      <a class="navbar-item is-tab" href="/service/{{.Service}}/edit">Edit</a>
+      <a class="navbar-item is-tab" href="/service/{{.Service}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab" href="/service/{{.Service}}/raw">{{ i18n("menu.raw") }}</a>
+      <a class="navbar-item is-tab is-active" href="/service/{{.Service}}/logs">{{ i18n("menu.log") }}</a>
+      <a class="navbar-item is-tab" href="/service/{{.Service}}/edit">{{ i18n("menu.edit") }}</a>
    </div>
  </div>
 </nav>
@@ -88,7 +88,7 @@
    </div>
    <a href="/service/" class="button is-primary">
      <span class="icon"><i class="fa fa-reply"></i></span>
-      <span>Return</span>
+      <span>{{ i18n("button.return") }}</span>
    </a>
  </div>
 </section>
--- a/views/service/raw.jet
+++ b/views/service/raw.jet
@@ -13,9 +13,9 @@
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/service/">Services</a></li>
-      <li class="is-active"><a>Raw</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/service/">{{ i18n("menu.service") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.raw") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -33,10 +33,10 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab" href="/service/{{.Service}}/detail">Detail</a>
-      <a class="navbar-item is-tab is-active" href="/service/{{.Service}}/raw">Raw</a>
-      <a class="navbar-item is-tab" href="/service/{{.Service}}/logs">Logs</a>
-      <a class="navbar-item is-tab" href="/service/{{.Service}}/edit">Edit</a>
+      <a class="navbar-item is-tab" href="/service/{{.Service}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab is-active" href="/service/{{.Service}}/raw">{{ i18n("menu.raw") }}</a>
+      <a class="navbar-item is-tab" href="/service/{{.Service}}/logs">{{ i18n("menu.log") }}</a>
+      <a class="navbar-item is-tab" href="/service/{{.Service}}/edit">{{ i18n("menu.edit") }}</a>
    </div>
  </div>
 </nav>
@@ -48,7 +48,7 @@
    </div>
    <a href="/service/" class="button is-primary">
      <span class="icon"><i class="fa fa-reply"></i></span>
-      <span>Return</span>
+      <span>{{ i18n("button.return") }}</span>
    </a>
  </div>
 </section>
--- a/views/service/template/base.jet
+++ b/views/service/template/base.jet
@@ -4,12 +4,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        SERVICE TEMPLATE
-      </h1>
-      <h2 class="subtitle is-5">
-        Manage service templates.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("service.template.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("service.template.description") }}</h2>
    </div>
  </div>
  <div class="hero-foot">
@@ -17,10 +13,10 @@
      <nav class="tabs is-boxed">
        <ul>
          <li>
-            <a href="/service/">Services</a>
+            <a href="/service/">{{ i18n("menu.service") }}</a>
          </li>
          <li class="is-active">
-            <a href="/service/template/">Templates</a>
+            <a href="/service/template/">{{ i18n("menu.service.template") }}</a>
          </li>
        </ul>
      </nav>
--- a/views/service/template/edit.jet
+++ b/views/service/template/edit.jet
@@ -9,9 +9,9 @@
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/service/">Services</a></li>
-      <li><a href="/service/template/">Templates</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/service/">{{ i18n("menu.service") }}</a></li>
+      <li><a href="/service/template/">{{ i18n("menu.service.template") }}</a></li>
      <li class="is-active"><a>{{ .Action }}</a></li>
    </ul>
  </nav>
--- a/views/service/template/list.jet
+++ b/views/service/template/list.jet
@@ -17,31 +17,32 @@
              <input name="name" value="{{ .Name }}" class="input" placeholder="Search by name">
            </p>
            <p class="control">
-              <button class="button is-primary">Search</button>
+              <button class="button is-primary">{{ i18n("button.search") }}</button>
            </p>
          </div>
        </form>
      </div>
      <div class="level-item">
        <p class="subtitle is-5">
-          <strong>{{ .Pager.Count }}</strong> templates
+          <strong>{{ .Pager.Count }}</strong>
+          <span class="is-lowercase">{{ i18n("menu.service.template") }}</span>
        </p>
      </div>      
    </div>
    <!-- Right side -->
    <div class="level-right">
      <p class="level-item">
-        <a class="button is-success" href="new"><span class="icon"><i class="fa fa-plus"></i></span><span>New</span></a>
+        <a class="button is-success" href="new"><span class="icon"><i class="fa fa-plus"></i></span><span>{{ i18n("button.new") }}</span></a>
      </p>
    </div>
  </nav>
  <table id="table-items" class="table is-bordered is-striped is-narrow is-fullwidth">
    <thead>
      <tr>
-        <th>Name</th>
-        <th>Created at</th>
-        <th>Updated at</th>
-        <th width="160">Action</th>
+        <th>{{ i18n("field.name") }}</th>
+        <th>{{ i18n("field.created-at") }}</th>
+        <th>{{ i18n("field.updated-at") }}</th>
+        <th width="160">{{ i18n("field.action") }}</th>
      </tr>
    </thead>
    <tbody>
@@ -51,13 +52,13 @@
        <td>{{time(.CreatedAt)}}</td>
        <td>{{time(.UpdatedAt)}}</td>
        <td>
-          <a href="/service/new?template={{.ID}}" class="button is-small is-success is-outlined tooltip is-tooltip-bottom" data-tooltip="Create Service">
+          <a href="/service/new?template={{.ID}}" class="button is-small is-success is-outlined tooltip is-tooltip-bottom" data-tooltip="{{ i18n("service.template.button.create") }}">
            <span class="icon"><i class="fa fa-plus"></i></span>
          </a>
-          <a href="{{.ID}}/edit" class="button is-small is-dark is-outlined tooltip is-tooltip-bottom" data-tooltip="Edit">
+          <a href="{{.ID}}/edit" class="button is-small is-dark is-outlined tooltip is-tooltip-bottom" data-tooltip="{{ i18n("button.edit") }}">
            <span class="icon"><i class="fa fa-edit"></i></span>
          </a>
-          <button class="button is-small is-danger is-outlined tooltip is-tooltip-bottom" data-tooltip="Delete" data-action="delete-template">
+          <button class="button is-small is-danger is-outlined tooltip is-tooltip-bottom" data-tooltip="{{ i18n("button.delete") }}" data-action="delete-template">
            <span class="icon"><i class="fa fa-remove"></i></span>
          </button>
        </td>
--- a/views/stack/archive/detail.jet
+++ b/views/stack/archive/detail.jet
@@ -13,12 +13,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        STACK
-      </h1>
-      <h2 class="subtitle is-5">
-        A stack is a logical grouping of related services that are usually deployed together and require each other to work as intended.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("stack.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("stack.description") }}</h2>
    </div>
  </div>
  <div class="hero-foot">
--- a/views/stack/archive/edit.jet
+++ b/views/stack/archive/edit.jet
@@ -14,12 +14,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        STACK
-      </h1>
-      <h2 class="subtitle is-5">
-        A stack is a logical grouping of related services that are usually deployed together and require each other to work as intended.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("stack.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("stack.description") }}</h2>
    </div>
  </div>
  <div class="hero-foot">
@@ -27,10 +23,10 @@
      <nav class="tabs is-boxed">
        <ul>
          <li>
-            <a href="/stack/task/">Tasks</a>
+            <a href="/stack/task/">{{ i18n("menu.stack.task") }}</a>
          </li>
          <li class="is-active">
-            <a href="/stack/archive/">Archives</a>
+            <a href="/stack/archive/">{{ i18n("menu.stack.archive") }}</a>
          </li>
        </ul>
      </nav>
@@ -41,9 +37,9 @@
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/stack/archive/">Archives</a></li>
-      <li class="is-active"><a>Edit</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/stack/archive/">{{ i18n("menu.stack.archive") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.edit") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -61,8 +57,8 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab" href="/stack/archive/{{.Archive.ID}}/detail">Detail</a>
-      <a class="navbar-item is-tab is-active" href="/stack/archive/{{.Archive.ID}}/edit">Edit</a>
+      <a class="navbar-item is-tab" href="/stack/archive/{{.Archive.ID}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab is-active" href="/stack/archive/{{.Archive.ID}}/edit">{{ i18n("menu.edit") }}</a>
    </div>
  </div>
 </nav>
@@ -72,7 +68,7 @@
    <form method="post" action="update" data-form="ajax-json" data-url="/stack/archive/">
      <input name="id" value="{{ .Archive.ID }}" type="hidden">
      <div class="field">
-        <label class="label">Name</label>
+        <label class="label">{{ i18n("field.name") }}</label>
        <div class="control">
          <input name="name" class="input" value="{{ .Archive.Name }}" type="text" placeholder="" data-v-rule="native;regex" data-v-arg-regex="^[a-z0-9_-]+$" data-v-msg-regex="Name can contain only letters, digits, '_' and '-'." required>
        </div>
@@ -85,10 +81,10 @@
      </div>
      <div class="field is-grouped">
        <div class="control">
-          <button type="submit" class="button is-primary">Submit</button>
+          <button type="submit" class="button is-primary">{{ i18n("button.submit") }}</button>
        </div>
        <div class="control">
-          <a href="/stack/archive/" class="button is-link">Cancel</a>
+          <a href="/stack/archive/" class="button is-link">{{ i18n("button.cancel") }}</a>
        </div>
      </div>
    </form>
--- a/views/stack/archive/list.jet
+++ b/views/stack/archive/list.jet
@@ -9,12 +9,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        STACK
-      </h1>
-      <h2 class="subtitle is-5">
-        A stack is a logical grouping of related services that are usually deployed together and require each other to work as intended.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("stack.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("stack.description") }}</h2>
    </div>
  </div>
  <div class="hero-foot">
@@ -22,10 +18,10 @@
      <nav class="tabs is-boxed">
        <ul>
          <li>
-            <a href="/stack/task/">Tasks</a>
+            <a href="/stack/task/">{{ i18n("menu.stack.task") }}</a>
          </li>
          <li class="is-active">
-            <a href="/stack/archive/">Archives</a>
+            <a href="/stack/archive/">{{ i18n("menu.stack.archive") }}</a>
          </li>
        </ul>
      </nav>
@@ -43,21 +39,22 @@
              <input name="name" value="{{.Name}}" class="input" type="text" placeholder="Search by name">
            </p>
            <p class="control">
-              <button type="submit" class="button is-primary">Search</button>
+              <button type="submit" class="button is-primary">{{ i18n("button.search") }}</button>
            </p>
          </div>
        </form>
      </div>
      <div class="level-item">
        <p class="subtitle is-5">
-          <strong>{{len(.Archives)}}</strong> archives
+          <strong>{{len(.Archives)}}</strong>
+          <span class="is-lowercase">{{ i18n("menu.stack.archive") }}</span>
        </p>
      </div>      
    </div>
    <!-- Right side -->
    <div class="level-right">
      <p class="level-item">
-        <a href="new" class="button is-success"><span class="icon"><i class="fa fa-plus"></i></span><span>New</span></a>
+        <a href="new" class="button is-success"><span class="icon"><i class="fa fa-plus"></i></span><span>{{ i18n("button.new") }}</span></a>
      </p>
    </div>
  </nav>
@@ -65,10 +62,10 @@
  <table id="table-items" class="table is-bordered is-striped is-narrow is-fullwidth">
      <thead>
          <tr>
-            <th>Name</th>
-            <th>Created at</th>
-            <th>Updated at</th>
-            <th>Action</th>
+            <th>{{ i18n("field.name") }}</th>
+            <th>{{ i18n("field.created-at") }}</th>
+            <th>{{ i18n("field.updated-at") }}</th>
+            <th>{{ i18n("field.action") }}</th>
          </tr>
      </thead>
      <tbody>
@@ -78,9 +75,9 @@
            <td>{{time(.CreatedAt)}}</td>
            <td>{{time(.UpdatedAt)}}</td>
            <td>
-              <a href="{{.ID}}/edit" class="button is-small is-dark is-outlined">Edit</a>
+              <a href="{{.ID}}/edit" class="button is-small is-dark is-outlined">{{ i18n("button.edit") }}</a>
              <button type="button" class="button is-small is-info is-outlined" data-action="deploy-archive">Deploy</button>
-              <button type="button" class="button is-small is-danger is-outlined" data-action="delete-archive">Delete</button>
+              <button type="button" class="button is-small is-danger is-outlined" data-action="delete-archive">{{ i18n("button.delete") }}</button>
            </td>
          </tr>
          {{end}}          
--- a/views/stack/archive/new.jet
+++ b/views/stack/archive/new.jet
@@ -4,12 +4,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        STACK
-      </h1>
-      <h2 class="subtitle is-5">
-        A stack is a logical grouping of related services that are usually deployed together and require each other to work as intended.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("stack.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("stack.description") }}</h2>
    </div>
  </div>
  <div class="hero-foot">
@@ -17,10 +13,10 @@
      <nav class="tabs is-boxed">
        <ul>
          <li>
-            <a href="/stack/task/">Tasks</a>
+            <a href="/stack/task/">{{ i18n("menu.stack.task") }}</a>
          </li>
          <li class="is-active">
-            <a href="/stack/archive/">Archives</a>
+            <a href="/stack/archive/">{{ i18n("menu.stack.archive") }}</a>
          </li>
        </ul>
      </nav>
@@ -33,7 +29,7 @@
    <hr>
    <form method="post" data-form="ajax-json" data-url="/stack/archive/">
      <div class="field">
-        <label class="label">Name</label>
+        <label class="label">{{ i18n("field.name") }}</label>
        <div class="control">
          <input name="name" class="input" type="text" placeholder="" data-v-rule="native;regex" data-v-arg-regex="^[a-z0-9_-]+$" data-v-msg-regex="Name can contain only letters, digits, '_' and '-'." required>
        </div>
@@ -46,10 +42,10 @@
      </div>
      <div class="field is-grouped">
        <div class="control">
-          <button type="submit" class="button is-primary">Submit</button>
+          <button type="submit" class="button is-primary">{{ i18n("button.submit") }}</button>
        </div>
        <div class="control">
-          <a href="/stack/archive/" class="button is-link">Cancel</a>
+          <a href="/stack/archive/" class="button is-link">{{ i18n("button.cancel") }}</a>
        </div>
      </div>
    </form>
--- a/views/stack/task/list.jet
+++ b/views/stack/task/list.jet
@@ -8,12 +8,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        STACK
-      </h1>
-      <h2 class="subtitle is-5">
-        A stack is a logical grouping of related services that are usually deployed together and require each other to work as intended.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("stack.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("stack.description") }}</h2>
    </div>
  </div>
  <div class="hero-foot">
@@ -21,10 +17,10 @@
      <nav class="tabs is-boxed">
        <ul>
          <li class="is-active">
-            <a href="/stack/task/">Tasks</a>
+            <a href="/stack/task/">{{ i18n("menu.stack.task") }}</a>
          </li>
          <li>
-            <a href="/stack/archive/">Archives</a>
+            <a href="/stack/archive/">{{ i18n("menu.stack.archive") }}</a>
          </li>
        </ul>
      </nav>
@@ -37,7 +33,8 @@
    <div class="level-left">
      <div class="level-item">
        <p class="subtitle is-5">
-          <strong>{{len(.Stacks)}}</strong> stacks
+          <strong>{{len(.Stacks)}}</strong>
+          <span class="is-lowercase">{{ i18n("menu.stack") }}</span>
        </p>
      </div>      
    </div>
@@ -45,9 +42,9 @@
  <table id="table-items" class="table is-bordered is-striped is-narrow is-fullwidth">
      <thead>
          <tr>
-            <th>Name</th>
+            <th>{{ i18n("field.name") }}</th>
            <th>Services</th>
-            <th>Action</th>
+            <th>{{ i18n("field.action") }}</th>
          </tr>
      </thead>
      <tbody>
@@ -62,7 +59,7 @@
              </div>
            </td>
            <td>
-              <button class="button is-small is-danger is-outlined" data-action="delete-stack">Delete</button>
+              <button class="button is-small is-danger is-outlined" data-action="delete-stack">{{ i18n("button.delete") }}</button>
            </td>
          </tr>
          {{end}}          
--- a/views/system/event/list.jet
+++ b/views/system/event/list.jet
@@ -9,10 +9,8 @@
 <section class="hero is-dark">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">EVENTS</h1>
-      <h2 class="subtitle is-5">
-        Manage all user events.
-      </h2>      
+      <h1 class="title is-2 is-uppercase">{{ i18n("event.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("event.description") }}</h2>
    </div>
  </div>
  <div class="hero-foot">
@@ -20,16 +18,16 @@
      <nav class="tabs is-boxed">
        <ul>
          <li>
-            <a href="/system/role/">Roles</a>
+            <a href="/system/role/">{{ i18n("menu.role") }}</a>
          </li>
          <li>
-            <a href="/system/user/">Users</a>
+            <a href="/system/user/">{{ i18n("menu.user") }}</a>
          </li>
          <li>
-            <a href="/system/setting/">Settings</a>
+            <a href="/system/setting/">{{ i18n("menu.setting") }}</a>
          </li>
          <li class="is-active">
-            <a href="/system/event/">Events</a>
+            <a href="/system/event/">{{ i18n("menu.event") }}</a>
          </li>          
        </ul>
      </nav>
@@ -76,14 +74,15 @@
              <input name="name" value="{{ .Args.Name }}" class="input" placeholder="Search by resource">
            </p>
            <p class="control">
-              <button class="button is-primary">Search</button>
+              <button class="button is-primary">{{ i18n("button.search") }}</button>
            </p>
          </div>
        </form>
      </div>
      <div class="level-item">
        <p class="subtitle is-5">
-          <strong>{{.Pager.Count}}</strong> events
+          <strong>{{.Pager.Count}}</strong>
+          <span class="is-lowercase">{{ i18n("menu.event") }}</span>
        </p>
      </div>
    </div>
--- a/views/system/role/_base.jet
+++ b/views/system/role/_base.jet
@@ -0,0 +1,33 @@
+{{ extends "../../_layouts/default" }}
+
+{{ block body() }}
+<section class="hero is-dark">
+  <div class="hero-body">
+    <div class="container has-text-centered">
+      <h1 class="title is-2 is-uppercase">{{ i18n("role.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("role.description") }}</h2>
+    </div>
+  </div>
+  <div class="hero-foot">
+    <div class="container">
+      <nav class="tabs is-boxed">
+        <ul>
+          <li class="is-active">
+            <a href="/system/role/">{{ i18n("menu.role") }}</a>
+          </li>
+          <li>
+            <a href="/system/user/">{{ i18n("menu.user") }}</a>
+          </li>
+          <li>
+            <a href="/system/setting/">{{ i18n("menu.setting") }}</a>
+          </li>
+          <li>
+            <a href="/system/event/">{{ i18n("menu.event") }}</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</section>
+{{ yield body_content() }}
+{{ end }}
--- a/views/system/role/detail.jet
+++ b/views/system/role/detail.jet
@@ -1,43 +1,12 @@
-{{ extends "../../_layouts/default" }}
-
-{{ block body() }}
-<section class="hero is-dark">
-  <div class="hero-body">
-    <div class="container has-text-centered">
-      <h1 class="title is-2">ROLE</h1>
-      <h2 class="subtitle is-5">
-        A role is a user group with same rights. User can belong to multiple roles.
-      </h2>
-    </div>
-  </div>
-  <div class="hero-foot">
-    <div class="container">
-      <nav class="tabs is-boxed">
-        <ul>
-          <li class="is-active">
-            <a href="/system/role/">Roles</a>
-          </li>
-          <li>
-            <a href="/system/user/">Users</a>
-          </li>
-          <li>
-            <a href="/system/setting/">Settings</a>
-          </li>
-          <li>
-            <a href="/system/event/">Events</a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
-</section>
+{{ extends "_base" }}

+{{ block body_content() }}
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/system/role/">Roles</a></li>
-      <li class="is-active"><a>Detail</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/system/role/">{{ i18n("menu.role") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.detail") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -54,8 +23,8 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab is-active" href="/system/role/{{.Role.ID}}/detail">Detail</a>
-      <a class="navbar-item is-tab" href="/system/role/{{.Role.ID}}/edit">Edit</a>
+      <a class="navbar-item is-tab is-active" href="/system/role/{{.Role.ID}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab" href="/system/role/{{.Role.ID}}/edit">{{ i18n("menu.edit") }}</a>
    </div>
  </div>
 </nav>
@@ -90,7 +59,7 @@
    </dl>
    <a href="/system/role/" class="button is-primary">
      <span class="icon"><i class="fa fa-reply"></i></span>
-      <span>Return</span>
+      <span>{{ i18n("button.return") }}</span>
    </a>
  </div>
 </section>
--- a/views/system/role/edit.jet
+++ b/views/system/role/edit.jet
@@ -1,48 +1,17 @@
-{{ extends "../../_layouts/default" }}
+{{ extends "_base" }}
 {{ import "../../_modules/form" }}

 {{ block script() }}
 <script>$(() => new Swirl.Role.EditPage())</script>
 {{ end }}

-{{ block body() }}
-<section class="hero is-dark">
-  <div class="hero-body">
-    <div class="container has-text-centered">
-      <h1 class="title is-2">ROLE</h1>
-      <h2 class="subtitle is-5">
-        A role is a user group with same rights. User can belong to multiple roles.
-      </h2>      
-    </div>
-  </div>
-  <div class="hero-foot">
-    <div class="container">
-      <nav class="tabs is-boxed">
-        <ul>
-          <li class="is-active">
-            <a href="/system/role/">Roles</a>
-          </li>
-          <li>
-            <a href="/system/user/">Users</a>
-          </li>
-          <li>
-            <a href="/system/setting/">Settings</a>
-          </li>
-          <li>
-            <a href="/system/event/">Events</a>
-          </li>          
-        </ul>
-      </nav>
-    </div>
-  </div>  
-</section>
-
+{{ block body_content() }}
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/system/role/">Roles</a></li>
-      <li class="is-active"><a>Edit</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/system/role/">{{ i18n("menu.role") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.edit") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -60,8 +29,8 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab" href="/system/role/{{.Role.ID}}/detail">Detail</a>
-      <a class="navbar-item is-tab is-active" href="/system/role/{{.Role.ID}}/edit">Edit</a>
+      <a class="navbar-item is-tab" href="/system/role/{{.Role.ID}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab is-active" href="/system/role/{{.Role.ID}}/edit">{{ i18n("menu.edit") }}</a>
    </div>
  </div>
 </nav>
@@ -70,7 +39,7 @@
  <div class="container">
    <form method="post" action="update" data-form="ajax-json" data-url="/system/role/">
      <div class="field">
-        <label class="label">Name</label>
+        <label class="label">{{ i18n("field.name") }}</label>
        <div class="control">
          <input name="name" value="{{.Role.Name}}" class="input" placeholder="Role name" data-v-rule="native" required>
        </div>
@@ -107,14 +76,7 @@
          </table>
        </div>
      </div>
-      <div class="field is-grouped">
-        <div class="control">
-          <button type="submit" class="button is-primary">Submit</button>
-        </div>
-        <div class="control">
-          <a href="/system/role/" class="button is-link">Cancel</a>
-        </div>
-      </div>
+      {{ yield form_submit(url="/system/role/") }}
    </form>
  </div>
 </section>
--- a/views/system/role/list.jet
+++ b/views/system/role/list.jet
@@ -1,55 +1,25 @@
-{{ extends "../../_layouts/default" }}
+{{ extends "_base" }}

 {{ block script() }}
 <script>$(() => new Swirl.Role.ListPage())</script>
 {{ end }}

-{{ block body() }}
-<section class="hero is-dark">
-  <div class="hero-body">
-    <div class="container has-text-centered">
-      <h1 class="title is-2">ROLE</h1>
-      <h2 class="subtitle is-5">
-        A role is a user group with same rights. User can belong to multiple roles.
-      </h2>      
-    </div>
-  </div>
-  <div class="hero-foot">
-    <div class="container">
-      <nav class="tabs is-boxed">
-        <ul>
-          <li class="is-active">
-            <a href="/system/role/">Roles</a>
-          </li>
-          <li>
-            <a href="/system/user/">Users</a>
-          </li>
-          <li>
-            <a href="/system/setting/">Settings</a>
-          </li>
-          <li>
-            <a href="/system/event/">Events</a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>  
-</section>
-
+{{ block body_content() }}
 <section class="section">
  <nav class="level">
    <!-- Left side -->
    <div class="level-left">
      <div class="level-item">
        <p class="subtitle is-5">
-          <strong>{{ len(.Roles) }}</strong> roles
+          <strong>{{ len(.Roles) }}</strong>
+          <span class="is-lowercase">{{ i18n("menu.role") }}</span>
        </p>
      </div>      
    </div>
    <!-- Right side -->
    <div class="level-right">
      <p class="level-item">
-        <a href="new" class="button is-success"><span class="icon"><i class="fa fa-plus"></i></span><span>New</span></a>
+        <a href="new" class="button is-success"><span class="icon"><i class="fa fa-plus"></i></span><span>{{ i18n("button.new") }}</span></a>
      </p>
    </div>
  </nav>
@@ -57,10 +27,10 @@
  <table id="table-items" class="table is-bordered is-striped is-narrow is-fullwidth">
    <thead>
        <tr>
-          <th>Name</th>
+          <th>{{ i18n("field.name") }}</th>
          <th>Description</th>
-          <th>Updated at</th>
-          <th>Action</th>
+          <th>{{ i18n("field.updated-at") }}</th>
+          <th>{{ i18n("field.action") }}</th>
        </tr>
    </thead>
      <tbody>
@@ -70,8 +40,8 @@
          <td>{{.Description}}</td>
          <td>{{time(.UpdatedAt)}}</td>
          <td>
-            <a href="{{.ID}}/edit" class="button is-small is-dark is-outlined">Edit</a>
-            <button class="button is-small is-danger is-outlined" data-action="delete-role">Delete</button>
+            <a href="{{.ID}}/edit" class="button is-small is-dark is-outlined">{{ i18n("button.edit") }}</a>
+            <button class="button is-small is-danger is-outlined" data-action="delete-role">{{ i18n("button.delete") }}</button>
          </td>
        </tr>
        {{end}}        
--- a/views/system/role/new.jet
+++ b/views/system/role/new.jet
@@ -1,49 +1,18 @@
-{{ extends "../../_layouts/default" }}
+{{ extends "_base" }}
 {{ import "../../_modules/form" }}

 {{ block script() }}
 <script>$(() => new Swirl.Role.NewPage())</script>
 {{ end }}

-{{ block body() }}
-<section class="hero is-dark">
-  <div class="hero-body">
-    <div class="container has-text-centered">
-      <h1 class="title is-2">ROLE</h1>
-      <h2 class="subtitle is-5">
-        A role is a user group with same rights. User can belong to multiple roles.
-      </h2>      
-    </div>
-  </div>
-  <div class="hero-foot">
-    <div class="container">
-      <nav class="tabs is-boxed">
-        <ul>
-          <li class="is-active">
-            <a href="/system/role/">Roles</a>
-          </li>
-          <li>
-            <a href="/system/user/">Users</a>
-          </li>
-          <li>
-            <a href="/system/setting/">Settings</a>
-          </li>
-          <li>
-            <a href="/system/event/">Events</a>
-          </li>          
-        </ul>
-      </nav>
-    </div>
-  </div>  
-</section>
-
+{{ block body_content() }}
 <section class="section">
  <div class="container">
    <h2 class="title">Create role</h2>
    <hr>
    <form method="post" data-form="ajax-json" data-url="/system/role/">
      <div class="field">
-        <label class="label">Name</label>
+        <label class="label">{{ i18n("field.name") }}</label>
        <div class="control">
          <input name="name" class="input" placeholder="Role name" data-v-rule="native" required>
        </div>
@@ -79,14 +48,7 @@
          </table>
        </div>
      </div>
-      <div class="field is-grouped">
-        <div class="control">
-          <button type="submit" class="button is-primary">Submit</button>
-        </div>
-        <div class="control">
-          <a href="/system/role/" class="button is-link">Cancel</a>
-        </div>
-      </div>
+      {{ yield form_submit(url="/system/role/") }}
    </form>
  </div>
 </section>
--- a/views/system/setting/index.jet
+++ b/views/system/setting/index.jet
@@ -10,10 +10,8 @@
 <section class="hero is-dark">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">SETTINGS</h1>
-      <h2 class="subtitle is-5">
-        Manage swirl settings.
-      </h2>      
+      <h1 class="title is-2 is-uppercase">{{ i18n("setting.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("setting.description") }}</h2>
    </div>
  </div>
  <div class="hero-foot">
@@ -21,16 +19,16 @@
      <nav class="tabs is-boxed">
        <ul>
          <li>
-            <a href="/system/role/">Roles</a>
+            <a href="/system/role/">{{ i18n("menu.role") }}</a>
          </li>
          <li>
-            <a href="/system/user/">Users</a>
+            <a href="/system/user/">{{ i18n("menu.user") }}</a>
          </li>
          <li class="is-active">
-            <a href="/system/setting/">Settings</a>
+            <a href="/system/setting/">{{ i18n("menu.setting") }}</a>
          </li>
          <li>
-            <a href="/system/event/">Events</a>
+            <a href="/system/event/">{{ i18n("menu.event") }}</a>
          </li>          
        </ul>
      </nav>
@@ -40,8 +38,6 @@

 <section class="section">
  <div class="container">
-    <h2 class="title">Settings</h2>
-    <hr>
    <form method="post" data-form="ajax-json" data-message="The settings have been successfully modified">
      <fieldset id="fs-ldap">
        <legend class="lead is-5 is-bordered">LDAP</legend>
--- a/views/system/user/_base.jet
+++ b/views/system/user/_base.jet
@@ -0,0 +1,33 @@
+{{ extends "../../_layouts/default" }}
+
+{{ block body() }}
+<section class="hero is-dark">
+  <div class="hero-body">
+    <div class="container has-text-centered">
+      <h1 class="title is-2 is-uppercase">{{ i18n("user.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("user.description") }}</h2>
+    </div>
+  </div>
+  <div class="hero-foot">
+    <div class="container">
+      <nav class="tabs is-boxed">
+        <ul>
+          <li>
+            <a href="/system/role/">{{ i18n("menu.role") }}</a>
+          </li>
+          <li class="is-active">
+            <a href="/system/user/">{{ i18n("menu.user") }}</a>
+          </li>
+          <li>
+            <a href="/system/setting/">{{ i18n("menu.setting") }}</a>
+          </li>
+          <li>
+            <a href="/system/event/">{{ i18n("menu.event") }}</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</section>
+{{ yield body_content() }}
+{{ end }}
--- a/views/system/user/detail.jet
+++ b/views/system/user/detail.jet
@@ -1,43 +1,12 @@
-{{ extends "../../_layouts/default" }}
-
-{{ block body() }}
-<section class="hero is-dark">
-  <div class="hero-body">
-    <div class="container has-text-centered">
-      <h1 class="title is-2">USER</h1>
-      <h2 class="subtitle is-5">
-        Manage users.
-      </h2>
-    </div>
-  </div>
-  <div class="hero-foot">
-    <div class="container">
-      <nav class="tabs is-boxed">
-        <ul>
-          <li>
-            <a href="/system/role/">Roles</a>
-          </li>
-          <li class="is-active">
-            <a href="/system/user/">Users</a>
-          </li>
-          <li>
-            <a href="/system/setting/">Settings</a>
-          </li>
-          <li>
-            <a href="/system/event/">Events</a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
-</section>
+{{ extends "_base" }}

+{{ block body_content() }}
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/system/user/">Users</a></li>
-      <li class="is-active"><a>Detail</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/system/user/">{{ i18n("menu.user") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.detail") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -55,8 +24,8 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab is-active" href="/system/user/{{.User.LoginName}}/detail">Detail</a>
-      <a class="navbar-item is-tab" href="/system/user/{{.User.LoginName}}/edit">Edit</a>
+      <a class="navbar-item is-tab is-active" href="/system/user/{{.User.LoginName}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab" href="/system/user/{{.User.LoginName}}/edit">{{ i18n("menu.edit") }}</a>
    </div>
  </div>
 </nav>
@@ -64,19 +33,19 @@
 <section class="section">
  <div class="container">
    <dl class="is-horizontal">
-      <dt class="has-text-left">Login name</dt>
+      <dt class="has-text-left">{{ i18n("field.login-name") }}</dt>
      <dd>{{ .User.LoginName }}</dd>
-      <dt class="has-text-left">Email</dt>
+      <dt class="has-text-left">{{ i18n("field.email") }}</dt>
      <dd>{{ .User.Email }}</dd>
      <dt class="has-text-left">Administrator</dt>
      <dd>{{ .User.Admin ? "Yes" : "No" }}</dd>
-      <dt class="has-text-left">Type</dt>
+      <dt class="has-text-left">{{ i18n("field.type") }}</dt>
      <dd class="is-capitalized">{{ .User.Type }}</dd>
-      <dt class="has-text-left">Status</dt>
+      <dt class="has-text-left">{{ i18n("field.status") }}</dt>
      <dd>{{ .User.Status == 1 ? "Active" : "Blocked" }}</dd>
-      <dt class="has-text-left">Created at</dt>
+      <dt class="has-text-left">{{ i18n("field.created-at") }}</dt>
      <dd>{{ time(.User.CreatedAt) }}</dd>
-      <dt class="has-text-left">Updated at</dt>
+      <dt class="has-text-left">{{ i18n("field.updated-at") }}</dt>
      <dd>{{ time(.User.UpdatedAt) }}</dd>
      {{if .Roles}}
      <dt class="has-text-left">Roles</dt>
@@ -94,7 +63,7 @@
    </dl>
    <a href="/system/user/" class="button is-primary">
      <span class="icon"><i class="fa fa-reply"></i></span>
-      <span>Return</span>
+      <span>{{ i18n("button.return") }}</span>
    </a>
  </div>
 </section>
--- a/views/system/user/edit.jet
+++ b/views/system/user/edit.jet
@@ -1,44 +1,13 @@
-{{ extends "../../_layouts/default" }}
+{{ extends "_base" }}
 {{ import "../../_modules/form" }}

-{{ block body() }}
-<section class="hero is-dark">
-  <div class="hero-body">
-    <div class="container has-text-centered">
-      <h1 class="title is-2">USER</h1>
-      <h2 class="subtitle is-5">
-        You ever have that feeling where you're not sure if you're awake or still dreaming?
-      </h2>      
-    </div>
-  </div>
-  <div class="hero-foot">
-    <div class="container">
-      <nav class="tabs is-boxed">
-        <ul>
-          <li>
-            <a href="/system/role/">Roles</a>
-          </li>
-          <li class="is-active">
-            <a href="/system/user/">Users</a>
-          </li>
-          <li>
-            <a href="/system/setting/">Settings</a>
-          </li>
-          <li>
-            <a href="/system/event/">Events</a>
-          </li>          
-        </ul>
-      </nav>
-    </div>
-  </div>  
-</section>
-
+{{ block body_content() }}
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/system/user/">Users</a></li>
-      <li class="is-active"><a>Edit</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/system/user/">{{ i18n("menu.user") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.edit") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -56,8 +25,8 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab" href="/system/user/{{.User.LoginName}}/detail">Detail</a>
-      <a class="navbar-item is-tab is-active" href="/system/user/{{.User.LoginName}}/edit">Edit</a>
+      <a class="navbar-item is-tab" href="/system/user/{{.User.LoginName}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab is-active" href="/system/user/{{.User.LoginName}}/edit">{{ i18n("menu.edit") }}</a>
    </div>
  </div>
 </nav>
@@ -69,7 +38,7 @@
      <div class="columns is-bottom-marginless">
        <div class="column is-6">
          <div class="field">
-            <label class="label">Name</label>
+            <label class="label">{{ i18n("field.name") }}</label>
            <div class="control has-icons-left">
              <input name="name" value="{{ .User.Name }}" class="input" placeholder="Name" data-v-rule="native" required>
              <span class="icon is-small is-left">
@@ -80,7 +49,7 @@
        </div>
        <div class="column is-6">
          <div class="field">
-            <label class="label">Email</label>
+            <label class="label">{{ i18n("field.email") }}</label>
            <div class="control has-icons-left">
              <input name="email" value="{{ .User.Email }}" class="input" placeholder="Email" data-v-rule="native" required>
              <span class="icon is-small is-left">
@@ -94,7 +63,7 @@
        {{ yield switch(id="cb-admin", name="admin", label="Administrator", checked=.User.Admin) }}
      </div>
      <div class="field">
-        <label class="label">Type</label>
+        <label class="label">{{ i18n("field.type") }}</label>
        <div class="control">
          {{ yield radio(name="type", value="internal", label="Internal", checked=.User.Type) }}
          {{ yield radio(name="type", value="ldap", label="LDAP", checked=.User.Type) }}
@@ -109,14 +78,7 @@
          {{end}}
        </div>
      </div>
-      <div class="field is-grouped">
-          <div class="control">
-            <button type="submit" class="button is-primary">Submit</button>
-          </div>
-          <div class="control">
-            <button class="button is-link">Cancel</button>
-          </div>
-        </div>
+      {{ yield form_submit(url="/system/user/") }}
    </form>
  </div>
 </section>
--- a/views/system/user/list.jet
+++ b/views/system/user/list.jet
@@ -1,42 +1,11 @@
-{{ extends "../../_layouts/default" }}
+{{ extends "_base" }}
 {{ import "../../_modules/pager" }}

 {{ block script() }}
 <script>$(() => new Swirl.User.ListPage())</script>
 {{ end }}

-{{ block body() }}
-<section class="hero is-dark">
-  <div class="hero-body">
-    <div class="container has-text-centered">
-      <h1 class="title is-2">USER</h1>
-      <h2 class="subtitle is-5">
-        Manage users.
-      </h2>      
-    </div>
-  </div>
-  <div class="hero-foot">
-    <div class="container">
-      <nav class="tabs is-boxed">
-        <ul>
-          <li>
-            <a href="/system/role/">Roles</a>
-          </li>
-          <li class="is-active">
-            <a href="/system/user/">Users</a>
-          </li>
-          <li>
-            <a href="/system/setting/">Settings</a>
-          </li>
-          <li>
-            <a href="/system/event/">Events</a>
-          </li>          
-        </ul>
-      </nav>
-    </div>
-  </div>  
-</section>
-
+{{ block body_content() }}
 <section class="section">
  <nav class="level">
    <!-- Left side -->
@@ -49,14 +18,15 @@
              <input name="query" value="{{.Query}}" class="input" type="text" placeholder="Search by name, login name and email">
            </p>
            <p class="control">
-              <button type="submit" class="button is-primary">Search</button>
+              <button type="submit" class="button is-primary">{{ i18n("button.search") }}</button>
            </p>
          </div>
        </form>
      </div>
      <div class="level-item">
        <p class="subtitle is-5">
-          <strong>{{.Pager.Count}}</strong> users
+          <strong>{{.Pager.Count}}</strong>
+          <span class="is-lowercase">{{ i18n("menu.user") }}</span>
        </p>
      </div>      
    </div>
@@ -90,7 +60,7 @@
        <a href="?filter=blocked">Blocked</a>        
        {{end}}
      <p class="level-item">
-        <a href="new" class="button is-success"><span class="icon"><i class="fa fa-plus"></i></span><span>New</span></a>
+        <a href="new" class="button is-success"><span class="icon"><i class="fa fa-plus"></i></span><span>{{ i18n("button.new") }}</span></a>
      </p>
    </div>
  </nav>
@@ -98,13 +68,13 @@
  <table id="table-items" class="table is-bordered is-striped is-narrow is-fullwidth">
    <thead>
        <tr>
-          <th>Name</th>
-          <th>Login Name</th>
-          <th>Email</th>
-          <th>Type</th>
-          <th>Status</th>
-          <th>Created at</th>
-          <th>Action</th>
+          <th>{{ i18n("field.name") }}</th>
+          <th>{{ i18n("field.login-name") }}</th>
+          <th>{{ i18n("field.email") }}</th>
+          <th>{{ i18n("field.type") }}</th>
+          <th>{{ i18n("field.status") }}</th>
+          <th>{{ i18n("field.created-at") }}</th>
+          <th>{{ i18n("field.action") }}</th>
        </tr>
    </thead>
      <tbody>
@@ -117,13 +87,13 @@
          <td><span class="tag is-{{.Status == 1 ? "success" : "warning"}}">{{.Status == 1 ? "Active" : "Blocked"}}</span></td>
          <td>{{time(.CreatedAt)}}</td>
          <td>
-            <a href="{{.LoginName}}/edit" class="button is-small is-dark is-outlined">Edit</a>
+            <a href="{{.LoginName}}/edit" class="button is-small is-dark is-outlined">{{ i18n("button.edit") }}</a>
            {{if .Status == 1}}
-            <button class="button is-small is-warning is-outlined" data-action="block-user">Block</button>
+            <button class="button is-small is-warning is-outlined" data-action="block-user">{{ i18n("user.button.block") }}</button>
            {{else}}
-            <button class="button is-small is-warning is-outlined" data-action="unblock-user">Unblock</button>
+            <button class="button is-small is-warning is-outlined" data-action="unblock-user">{{ i18n("user.button.unblock") }}</button>
            {{end}}
-            <button class="button is-small is-danger is-outlined" data-action="delete-user">Delete</button>
+            <button class="button is-small is-danger is-outlined" data-action="delete-user">{{ i18n("button.delete") }}</button>
          </td>
        </tr>
        {{end}}
--- a/views/system/user/new.jet
+++ b/views/system/user/new.jet
@@ -1,38 +1,7 @@
-{{ extends "../../_layouts/default" }}
+{{ extends "_base" }}
 {{ import "../../_modules/form" }}

-{{ block body() }}
-<section class="hero is-dark">
-  <div class="hero-body">
-    <div class="container has-text-centered">
-      <h1 class="title is-2">USER</h1>
-      <h2 class="subtitle is-5">
-        You ever have that feeling where you're not sure if you're awake or still dreaming?
-      </h2>      
-    </div>
-  </div>
-  <div class="hero-foot">
-    <div class="container">
-      <nav class="tabs is-boxed">
-        <ul>
-          <li>
-            <a href="/system/role/">Roles</a>
-          </li>
-          <li class="is-active">
-            <a href="/system/user/">Users</a>
-          </li>
-          <li>
-            <a href="/system/setting/">Settings</a>
-          </li>
-          <li>
-            <a href="/system/event/">Events</a>
-          </li>          
-        </ul>
-      </nav>
-    </div>
-  </div>  
-</section>
-
+{{ block body_content() }}
 <section class="section">
  <div class="container">
    <h2 class="title">Create user</h2>
@@ -41,7 +10,7 @@
      <div class="columns is-bottom-marginless">
        <div class="column is-6">
          <div class="field">
-            <label class="label">Name</label>
+            <label class="label">{{ i18n("field.name") }}</label>
            <div class="control has-icons-left">
              <input name="name" class="input" placeholder="Name" data-v-rule="native" required>
              <span class="icon is-small is-left">
@@ -50,7 +19,7 @@
            </div>
          </div>
          <div class="field">
-            <label class="label">Login name</label>
+            <label class="label">{{ i18n("field.login-name") }}</label>
            <div class="control has-icons-left">
              <input name="login_name" class="input" placeholder="Login name" data-v-rule="native" required>
              <span class="icon is-small is-left">
@@ -59,7 +28,7 @@
            </div>
          </div>
          <div class="field">
-            <label class="label">Email</label>
+            <label class="label">{{ i18n("field.email") }}</label>
            <div class="control has-icons-left">
              <input name="email" class="input" placeholder="Email" data-v-rule="native" required>
              <span class="icon is-small is-left">
@@ -70,7 +39,7 @@
        </div>
        <div class="column is-6">
          <div class="field">
-            <label class="label">Password</label>
+            <label class="label">{{ i18n("field.password") }}</label>
            <div class="control has-icons-left">
              <input id="txt-password" name="password" type="password" class="input" placeholder="Password" data-v-rule="native" required>
              <span class="icon is-small is-left">
@@ -93,7 +62,7 @@
        {{ yield switch(id="cb-admin", name="admin", label="Administrator") }}
      </div>
      <div class="field">
-        <label class="label">Type</label>
+        <label class="label">{{ i18n("field.type") }}</label>
        <div class="control">
          {{ yield radio(name="type", value="internal", label="Internal", checked="internal") }}
          {{ yield radio(name="type", value="ldap", label="LDAP") }}
@@ -107,14 +76,7 @@
          {{end}}
        </div>
      </div>
-      <div class="field is-grouped">
-          <div class="control">
-            <button type="submit" class="button is-primary">Submit</button>
-          </div>
-          <div class="control">
-            <a href="/system/user/" class="button is-link">Cancel</a>
-          </div>
-        </div>
+      {{ yield form_submit(url="/system/user/") }}
    </form>
  </div>
 </section>
--- a/views/volume/detail.jet
+++ b/views/volume/detail.jet
@@ -5,12 +5,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        VOLUMES
-      </h1>
-      <h2 class="subtitle is-5">
-        Create and manage persistent storage that can be attached to containers.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("volume.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("volume.description") }}</h2>
    </div>
  </div>
 </section>
@@ -18,9 +14,9 @@
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/volume/">Volumes</a></li>
-      <li class="is-active"><a>Detail</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/volume/">{{ i18n("menu.volume") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.detail") }}</a></li>
    </ul>
  </nav>
 </div>
@@ -36,12 +32,8 @@
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab is-active" href="/volume/{{.Volume.Name}}/detail">
-        Detail
-      </a>
-      <a class="navbar-item is-tab " href="/volume/{{.Volume.Name}}/raw">
-        Raw
-      </a>
+      <a class="navbar-item is-tab is-active" href="/volume/{{.Volume.Name}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab " href="/volume/{{.Volume.Name}}/raw">{{ i18n("menu.raw") }}</a>
    </div>
  </div>
 </nav>
@@ -63,7 +55,7 @@
    {{ yield tags(title="Labels", tags=.Volume.Labels) }}
    <a href="/volume/" class="button is-primary">
      <span class="icon"><i class="fa fa-reply"></i></span>
-      <span>Return</span>
+      <span>{{ i18n("button.return") }}</span>
    </a>
  </div>
 </section>
--- a/views/volume/list.jet
+++ b/views/volume/list.jet
@@ -9,12 +9,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        VOLUMES
-      </h1>
-      <h2 class="subtitle is-5">
-        Create and manage persistent storage that can be attached to containers.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("volume.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("volume.description") }}</h2>
    </div>
  </div>
 </section>
@@ -30,27 +26,27 @@
              <input name="name" value="" class="input" placeholder="Search by name">
            </p>
            <p class="control">
-              <button class="button is-primary">Search</button>
+              <button class="button is-primary">{{ i18n("button.search") }}</button>
            </p>
          </div>
        </form>
      </div>
      <div class="level-item">
        <p class="subtitle is-5">
-          <strong>{{.Pager.Count}}</strong> volumes
+          <strong>{{.Pager.Count}}</strong> <span class="is-lowercase">{{ i18n("menu.volume") }}</span>
        </p>
      </div>      
    </div>
    <!-- Right side -->
    <div class="level-right">
      <p class="level-item">
-        <button id="btn-delete" class="button is-danger"><span class="icon"><i class="fa fa-remove"></i></span><span>Delete</span></button>
+        <button id="btn-delete" class="button is-danger"><span class="icon"><i class="fa fa-remove"></i></span><span>{{ i18n("button.delete") }}</span></button>
      </p>
      <p class="level-item">
-        <button id="btn-prune" class="button is-warning"><span class="icon"><i class="fa fa-times-circle"></i></span><span>Prune</span></button>
+        <button id="btn-prune" class="button is-warning"><span class="icon"><i class="fa fa-times-circle"></i></span><span>{{ i18n("button.prune") }}</span></button>
      </p>
      <p class="level-item">
-        <a class="button is-success" href="new"><span class="icon"><i class="fa fa-plus"></i></span><span>New</span></a>
+        <a class="button is-success" href="new"><span class="icon"><i class="fa fa-plus"></i></span><span>{{ i18n("button.new") }}</span></a>
      </p>
    </div>
  </nav>
@@ -59,11 +55,11 @@
    <thead>
      <tr>
        <th width="30"><input type="checkbox" data-action="check-all"></th>
-        <th>Name</th>
+        <th>{{ i18n("field.name") }}</th>
        <th>Driver</th>
        <th>Scope</th>
        <th>Mount point</th>
-        <th>Action</th>
+        <th>{{ i18n("field.action") }}</th>
      </tr>
    </thead>
    <tbody>
@@ -76,7 +72,7 @@
        <td>{{ limit(.Mountpoint, 50) }}</td>
        <td>
          <div class="field has-addons">
-            <p class="control"><button class="button is-small is-danger is-outlined" data-action="delete-volume">Delete</button></p>
+            <p class="control"><button class="button is-small is-danger is-outlined" data-action="delete-volume">{{ i18n("button.delete") }}</button></p>
          </div>
        </td>
      </tr>          
--- a/views/volume/new.jet
+++ b/views/volume/new.jet
@@ -9,12 +9,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        VOLUMES
-      </h1>
-      <h2 class="subtitle is-5">
-        Create and manage persistent storage that can be attached to containers.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("volume.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("volume.description") }}</h2>
    </div>
  </div>
 </section>
@@ -27,7 +23,7 @@
      <div class="columns is-bottom-marginless">
        <div class="column is-6">
          <div class="field">
-            <label class="label">Name</label>
+            <label class="label">{{ i18n("field.name") }}</label>
            <div class="control">
              <input name="name" class="input" placeholder="Name" data-v-rule="native" required>
            </div>
@@ -56,10 +52,10 @@
      </fieldset>
      <div class="field is-grouped">
          <div class="control">
-            <button type="submit" class="button is-primary">Submit</button>
+            <button type="submit" class="button is-primary">{{ i18n("button.submit") }}</button>
          </div>
          <div class="control">
-            <a href="/volume/" class="button is-link">Cancel</a>
+            <a href="/volume/" class="button is-link">{{ i18n("button.cancel") }}</a>
          </div>
        </div>
    </form>
--- a/views/volume/raw.jet
+++ b/views/volume/raw.jet
@@ -13,12 +13,8 @@
 <section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
-      <h1 class="title is-2">
-        VOLUMES
-      </h1>
-      <h2 class="subtitle is-5">
-        Create and manage persistent storage that can be attached to containers.
-      </h2>
+      <h1 class="title is-2 is-uppercase">{{ i18n("volume.title") }}</h1>
+      <h2 class="subtitle is-5">{{ i18n("volume.description") }}</h2>
    </div>
  </div>
 </section>
@@ -26,30 +22,24 @@
 <div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/volume/">Volumes</a></li>
-      <li class="is-active"><a>Raw</a></li>
+      <li><a href="/">{{ i18n("menu.dashboard") }}</a></li>
+      <li><a href="/volume/">{{ i18n("menu.volume") }}</a></li>
+      <li class="is-active"><a>{{ i18n("menu.raw") }}</a></li>
    </ul>
  </nav>
 </div>
 <section class="hero is-small is-light">
  <div class="hero-body">
    <div class="container">
-      <h2 class="title is-2">
-        {{ .Volume }}
-      </h2>      
+      <h2 class="title is-2">{{ .Volume }}</h2>
    </div>
  </div>
 </section>
 <nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
-      <a class="navbar-item is-tab" href="/volume/{{.Volume}}/detail">
-        Detail
-      </a>
-      <a class="navbar-item is-tab is-active" href="/volume/{{.Volume}}/raw">
-        Raw
-      </a>
+      <a class="navbar-item is-tab" href="/volume/{{.Volume}}/detail">{{ i18n("menu.detail") }}</a>
+      <a class="navbar-item is-tab is-active" href="/volume/{{.Volume}}/raw">{{ i18n("menu.raw") }}</a>
    </div>
  </div>
 </nav>
@@ -60,7 +50,7 @@
    </div>
    <a href="/volume/" class="button is-primary">
      <span class="icon"><i class="fa fa-reply"></i></span>
-      <span>Return</span>
+      <span>{{ i18n("button.return") }}</span>
    </a>
  </div>
 </section>