diff --git a/src/frontend/src/ExportedRoutes.js b/src/frontend/src/ExportedRoutes.js
index 554fe08c3..83819326e 100644
--- a/src/frontend/src/ExportedRoutes.js
+++ b/src/frontend/src/ExportedRoutes.js
@@ -48,6 +48,8 @@ import TransactionDetail from "@/modules/Transactions/Transaction.vue"
 import TransactionList from "@/modules/Transactions/Transactions.vue"
 import UnauthorizedPage from "@/modules/Unauthorized/index.vue"
 import AddVillage from "@/modules/Village/AddVillage.vue"
+import VillageDetail from "@/modules/Village/VillageDetail.vue"
+import VillageList from "@/modules/Village/Villages.vue"
 import Welcome from "@/modules/Welcome/index.vue"
 import AfricasTalkingOverview from "@/plugins/africas-talking/modules/Overview/Overview.vue"
 import AngazaShsOverview from "@/plugins/angaza-shs/modules/Overview/Overview.vue"
@@ -457,6 +459,45 @@ export const exportedRoutes = [
       },
     ],
   },
+  {
+    path: "/villages",
+    component: ChildRouteWrapper,
+    meta: {
+      permissions: ["settings"],
+      sidebar: {
+        enabled: true,
+        name: "Villages",
+        icon: "location_city",
+      },
+    },
+    children: [
+      {
+        path: "",
+        component: VillageList,
+        meta: {
+          layout: "default",
+          breadcrumb: {
+            level: "base",
+            name: "Villages",
+            link: "/villages",
+          },
+        },
+      },
+      {
+        path: ":id",
+        component: VillageDetail,
+        meta: {
+          layout: "default",
+          breadcrumb: {
+            level: "detail",
+            name: "Villages",
+            link: "/villages",
+            target: "id",
+          },
+        },
+      },
+    ],
+  },
   {
     path: "/transactions",
     component: ChildRouteWrapper,
diff --git a/src/frontend/src/assets/locales/ar.json b/src/frontend/src/assets/locales/ar.json
index 3897e791f..696342e9b 100644
--- a/src/frontend/src/assets/locales/ar.json
+++ b/src/frontend/src/assets/locales/ar.json
@@ -40,6 +40,7 @@
     "Tariffs": "التعريفات",
     "Tickets": "التذاكر",
     "Transactions": "المعاملات",
+    "Villages": "القرى",
     "Viber Messaging": "مراسلة فايبر",
     "WaveMoney": "ويف موني",
     "Wavecom Payment Provider": "مزود الدفع ويفكوم",
diff --git a/src/frontend/src/assets/locales/bu.json b/src/frontend/src/assets/locales/bu.json
index e7167e71a..ccb79548f 100644
--- a/src/frontend/src/assets/locales/bu.json
+++ b/src/frontend/src/assets/locales/bu.json
@@ -40,6 +40,7 @@
     "Tariffs": "Jှ+နး်ထားများ",
     "Tickets": "ကွနပ်လိနး်များ",
     "Transactions": "ေငေွပးေငယွ ူ",
+    "Villages": "ေကျးရွာများ",
     "Viber Messaging": "Viber Messaging",
     "WaveMoney": "Wave Money",
     "Wavecom Payment Provider": "Wavecom Payment Provider",
diff --git a/src/frontend/src/assets/locales/en.json b/src/frontend/src/assets/locales/en.json
index 4920e897e..bf3387aa6 100644
--- a/src/frontend/src/assets/locales/en.json
+++ b/src/frontend/src/assets/locales/en.json
@@ -40,6 +40,7 @@
     "Tariffs": "Tariffs",
     "Tickets": "Tickets",
     "Transactions": "Transactions",
+    "Villages": "Villages",
     "Viber Messaging": "Viber Messaging",
     "WaveMoney": "Wave Money",
     "Wavecom Payment Provider": "Wavecom Payment Provider",
diff --git a/src/frontend/src/assets/locales/fr.json b/src/frontend/src/assets/locales/fr.json
index db9b9dfec..b5b38d821 100644
--- a/src/frontend/src/assets/locales/fr.json
+++ b/src/frontend/src/assets/locales/fr.json
@@ -40,6 +40,7 @@
     "Tariffs": "Tariffs",
     "Tickets": "Tickets",
     "Transactions": "Transactions",
+    "Villages": "Villages",
     "Viber Messaging": "Viber Messaging",
     "WaveMoney": "Wave Money",
     "Wavecom Payment Provider": "Wavecom Payment Provider",
diff --git a/src/frontend/src/modules/Village/VillageDetail.vue b/src/frontend/src/modules/Village/VillageDetail.vue
new file mode 100644
index 000000000..34a48d62e
--- /dev/null
+++ b/src/frontend/src/modules/Village/VillageDetail.vue
@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <widget
+      :id="'village-detail'"
+      :title="village.name ? `${$tc('words.village')} - ${village.name}` : $tc('words.village')"
+      :subscriber="subscriber"
+      color="primary"
+    >
+      <md-card>
+        <md-card-content>
+          <form class="md-layout md-gutter" data-vv-scope="village-detail-form">
+            <div class="md-layout-item md-size-50 md-small-size-100">
+              <md-field
+                :class="{
+                  'md-invalid': errors.has('village-detail-form.name'),
+                }"
+              >
+                <label for="village_name">{{ $tc("words.name") }}</label>
+                <md-input
+                  id="village_name"
+                  name="name"
+                  v-model="village.name"
+                  :disabled="!$can('settings')"
+                  v-validate="'required|min:2'"
+                />
+                <span class="md-error">
+                  {{ errors.first("village-detail-form.name") }}
+                </span>
+              </md-field>
+            </div>
+
+            <div class="md-layout-item md-size-50 md-small-size-100">
+              <md-field
+                :class="{
+                  'md-invalid': errors.has('village-detail-form.country'),
+                }"
+              >
+                <label for="country_id">{{ $tc("words.country") }}</label>
+                <md-select
+                  id="country_id"
+                  name="country"
+                  v-model="village.countryId"
+                  :disabled="!$can('settings')"
+                  v-validate="'required'"
+                >
+                  <md-option
+                    v-for="country in countryService.list"
+                    :key="country.id"
+                    :value="country.id"
+                  >
+                    {{ country.name || country.country_name }}
+                  </md-option>
+                </md-select>
+                <span class="md-error">
+                  {{ errors.first("village-detail-form.country") }}
+                </span>
+              </md-field>
+            </div>
+
+            <div class="md-layout-item md-size-50 md-small-size-100">
+              <md-field
+                :class="{
+                  'md-invalid': errors.has('village-detail-form.mini_grid'),
+                }"
+              >
+                <label for="mini_grid_id">{{ $tc("words.miniGrid") }}</label>
+                <md-select
+                  id="mini_grid_id"
+                  name="mini_grid"
+                  v-model="village.miniGridId"
+                  :disabled="!$can('settings')"
+                  v-validate="'required'"
+                >
+                  <md-option
+                    v-for="miniGrid in miniGridService.list"
+                    :key="miniGrid.id"
+                    :value="miniGrid.id"
+                  >
+                    {{ miniGrid.name }}
+                  </md-option>
+                </md-select>
+                <span class="md-error">
+                  {{ errors.first("village-detail-form.mini_grid") }}
+                </span>
+              </md-field>
+            </div>
+
+            <div class="md-layout-item md-size-50 md-small-size-100">
+              <md-field>
+                <label for="village_location">{{ $tc("words.location") }}</label>
+                <md-input
+                  id="village_location"
+                  :value="village.points || '-'"
+                  disabled
+                />
+              </md-field>
+            </div>
+          </form>
+        </md-card-content>
+
+        <md-card-actions>
+          <md-button
+            v-if="$can('settings')"
+            class="md-raised md-primary"
+            :disabled="loading"
+            @click="saveVillage"
+          >
+            {{ $tc("words.save") }}
+          </md-button>
+          <md-button class="md-raised" :disabled="loading" @click="goBack">
+            {{ $tc("words.close") }}
+          </md-button>
+        </md-card-actions>
+      </md-card>
+    </widget>
+    <md-progress-bar md-mode="indeterminate" v-if="loading" />
+  </div>
+</template>
+
+<script>
+import { notify } from "@/mixins/notify.js"
+import { CityService } from "@/services/CityService.js"
+import CountryService from "@/services/CountryService.js"
+import { MiniGridService } from "@/services/MiniGridService.js"
+import { EventBus } from "@/shared/eventbus.js"
+import Widget from "@/shared/Widget.vue"
+
+export default {
+  name: "VillageDetail",
+  mixins: [notify],
+  components: { Widget },
+  data() {
+    return {
+      subscriber: "village-detail",
+      cityService: new CityService(),
+      miniGridService: new MiniGridService(),
+      countryService: new CountryService(),
+      villageId: this.$route.params.id,
+      loading: false,
+      village: {
+        id: null,
+        name: "",
+        countryId: null,
+        miniGridId: null,
+        points: "",
+      },
+    }
+  },
+  mounted() {
+    this.loadVillage()
+  },
+  methods: {
+    async loadVillage() {
+      this.loading = true
+      try {
+        await Promise.all([
+          this.miniGridService.getMiniGrids(),
+          this.countryService.getCountries(),
+        ])
+
+        const city = await this.cityService.getCity(this.villageId, true)
+        this.village = {
+          id: city.id,
+          name: city.name,
+          countryId: city.country_id,
+          miniGridId: city.mini_grid_id,
+          points: city.location?.points || "",
+        }
+
+        EventBus.$emit("widgetContentLoaded", this.subscriber, 1)
+      } catch (e) {
+        EventBus.$emit("widgetContentLoaded", this.subscriber, 0)
+        this.alertNotify("error", e.message)
+      }
+      this.loading = false
+    },
+    async saveVillage() {
+      const validator = await this.$validator.validateAll("village-detail-form")
+      if (!validator) {
+        return
+      }
+
+      this.loading = true
+      try {
+        const payload = {
+          name: this.village.name,
+          miniGridId: this.village.miniGridId,
+          countryId: this.village.countryId,
+          // Backend validation currently requires points on update.
+          points: this.village.points || "0,0",
+        }
+
+        const updatedVillage = await this.cityService.updateCity(
+          this.village.id,
+          payload,
+        )
+
+        this.village = {
+          ...this.village,
+          name: updatedVillage.name,
+          countryId: updatedVillage.country_id,
+          miniGridId: updatedVillage.mini_grid_id,
+        }
+
+        this.alertNotify(
+          "success",
+          this.$tc("messages.successfullyUpdated", 0, {
+            item: this.$tc("words.village"),
+          }),
+        )
+      } catch (e) {
+        this.alertNotify("error", e.message)
+      }
+      this.loading = false
+    },
+    goBack() {
+      this.$router.push("/villages")
+    },
+  },
+  watch: {
+    "$route.params.id": async function (newVillageId) {
+      this.villageId = newVillageId
+      await this.loadVillage()
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/frontend/src/modules/Village/Villages.vue b/src/frontend/src/modules/Village/Villages.vue
new file mode 100644
index 000000000..b207aa2bf
--- /dev/null
+++ b/src/frontend/src/modules/Village/Villages.vue
@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <widget
+      :id="'village-list'"
+      :title="'Villages'"
+      :subscriber="subscriber"
+      :button="true"
+      :button-text="$tc('menu.subMenu.addVillage')"
+      color="primary"
+      @widgetAction="goToAddVillage"
+    >
+      <md-table md-card style="margin-left: 0">
+        <md-table-row>
+          <md-table-head>{{ $tc("words.id") }}</md-table-head>
+          <md-table-head>{{ $tc("words.name") }}</md-table-head>
+          <md-table-head>{{ $tc("words.country") }}</md-table-head>
+          <md-table-head>{{ $tc("words.miniGrid") }}</md-table-head>
+          <md-table-head>{{ $tc("words.location") }}</md-table-head>
+          <md-table-head>{{ $tc("phrases.lastUpdate") }}</md-table-head>
+        </md-table-row>
+        <md-table-row
+          v-for="village in villages"
+          :key="village.id"
+          class="cursor-pointer"
+          @click="goToVillageDetail(village.id)"
+        >
+          <md-table-cell>{{ village.id }}</md-table-cell>
+          <md-table-cell>{{ village.name }}</md-table-cell>
+          <md-table-cell>{{ getCountryName(village.country_id) }}</md-table-cell>
+          <md-table-cell>{{ getMiniGridName(village.mini_grid_id) }}</md-table-cell>
+          <md-table-cell>{{ village.location?.points || "-" }}</md-table-cell>
+          <md-table-cell>{{ timeForTimeZone(village.updated_at) }}</md-table-cell>
+        </md-table-row>
+      </md-table>
+    </widget>
+  </div>
+</template>
+
+<script>
+import { notify } from "@/mixins/notify.js"
+import { timing } from "@/mixins/timing.js"
+import { CityService } from "@/services/CityService.js"
+import CountryService from "@/services/CountryService.js"
+import { MiniGridService } from "@/services/MiniGridService.js"
+import { EventBus } from "@/shared/eventbus.js"
+import Widget from "@/shared/Widget.vue"
+
+export default {
+  name: "Villages",
+  mixins: [notify, timing],
+  components: { Widget },
+  data() {
+    return {
+      subscriber: "village-list",
+      cityService: new CityService(),
+      miniGridService: new MiniGridService(),
+      countryService: new CountryService(),
+      villages: [],
+    }
+  },
+  mounted() {
+    this.loadVillages()
+  },
+  methods: {
+    async loadVillages() {
+      try {
+        const [villages] = await Promise.all([
+          this.cityService.getCities(),
+          this.miniGridService.getMiniGrids(),
+          this.countryService.getCountries(),
+        ])
+
+        this.villages = [...villages].sort((a, b) =>
+          (a.name || "").localeCompare(b.name || ""),
+        )
+        EventBus.$emit("widgetContentLoaded", this.subscriber, this.villages.length)
+      } catch (e) {
+        EventBus.$emit("widgetContentLoaded", this.subscriber, 0)
+        this.alertNotify("error", e.message)
+      }
+    },
+    getMiniGridName(miniGridId) {
+      const miniGrid = this.miniGridService.list.find(
+        (item) => item.id === miniGridId,
+      )
+      return miniGrid ? miniGrid.name : "-"
+    },
+    getCountryName(countryId) {
+      const country = this.countryService.list.find((item) => item.id === countryId)
+      return country ? country.name || country.country_name || "-" : "-"
+    },
+    goToVillageDetail(villageId) {
+      this.$router.push(`/villages/${villageId}`)
+    },
+    goToAddVillage() {
+      this.$router.push("/locations/add-village")
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/frontend/src/repositories/CityRepository.js b/src/frontend/src/repositories/CityRepository.js
index fac27a0fa..3f9b8f8ef 100644
--- a/src/frontend/src/repositories/CityRepository.js
+++ b/src/frontend/src/repositories/CityRepository.js
@@ -6,7 +6,14 @@ export default {
   list() {
     return Client.get(`${resource}`)
   },
+  detail(cityId, withRelation = false) {
+    const query = withRelation ? "?relation=1" : ""
+    return Client.get(`${resource}/${cityId}${query}`)
+  },
   create(city) {
     return Client.post(`${resource}`, city)
   },
+  update(cityId, city) {
+    return Client.put(`${resource}/${cityId}`, city)
+  },
 }
diff --git a/src/frontend/src/services/CityService.js b/src/frontend/src/services/CityService.js
index 14d224269..40d7ffed3 100644
--- a/src/frontend/src/services/CityService.js
+++ b/src/frontend/src/services/CityService.js
@@ -116,4 +116,33 @@ export class CityService {
       return new ErrorHandler(errorMessage, "http")
     }
   }
+
+  async getCity(cityId, withRelation = false) {
+    try {
+      const { data, status, error } = await this.repository.detail(
+        cityId,
+        withRelation,
+      )
+      if (status !== 200) return new ErrorHandler(error, "http", status)
+      this.city = data.data
+      return this.city
+    } catch (e) {
+      const errorMessage = e.response.data.message
+      return new ErrorHandler(errorMessage, "http")
+    }
+  }
+
+  async updateCity(cityId, cityData) {
+    try {
+      const params = convertObjectKeysToSnakeCase(cityData)
+      const { data, status, error } = await this.repository.update(cityId, params)
+      if (status !== 200 && status !== 201)
+        return new ErrorHandler(error, "http", status)
+      this.city = data.data
+      return this.city
+    } catch (e) {
+      const errorMessage = e.response.data.message
+      return new ErrorHandler(errorMessage, "http")
+    }
+  }
 }