diff --git a/vue-app/src/components.d.ts b/vue-app/src/components.d.ts
index a96a5cb24..1cef45f0e 100644
--- a/vue-app/src/components.d.ts
+++ b/vue-app/src/components.d.ts
@@ -23,7 +23,7 @@ declare module '@vue/runtime-core' {
     ContributionModal: typeof import('./components/ContributionModal.vue')['default']
     CopyButton: typeof import('./components/CopyButton.vue')['default']
     CriteriaModal: typeof import('./components/CriteriaModal.vue')['default']
-    DatePeriod: typeof import('./components/DatePeriod.vue')['default']
+    DateRange: typeof import('./components/DateRange.vue')['default']
     ErrorModal: typeof import('./components/ErrorModal.vue')['default']
     FilterDropdown: typeof import('./components/FilterDropdown.vue')['default']
     FormNavigation: typeof import('./components/FormNavigation.vue')['default']
diff --git a/vue-app/src/components/DatePeriod.vue b/vue-app/src/components/DateRange.vue
similarity index 100%
rename from vue-app/src/components/DatePeriod.vue
rename to vue-app/src/components/DateRange.vue
diff --git a/vue-app/src/components/RoundInformation.vue b/vue-app/src/components/RoundInformation.vue
index d0c9a2b16..e90f7ecb8 100644
--- a/vue-app/src/components/RoundInformation.vue
+++ b/vue-app/src/components/RoundInformation.vue
@@ -169,7 +169,7 @@
         <div v-if="roundInfo && hasDateElapsed(roundInfo.votingDeadline)" class="round-info-item">
           <div class="round-info-title">{{ $t('roundInfo.round_period') }}</div>
           <div class="round-info-value">
-            <date-period :start-date="roundInfo.startTime" :end-date="roundInfo.votingDeadline" />
+            <date-range :start-date="roundInfo.startTime" :end-date="roundInfo.votingDeadline" />
           </div>
         </div>
         <div class="round-value-info">
diff --git a/vue-app/src/views/Leaderboard.vue b/vue-app/src/views/Leaderboard.vue
index 65b06b5e1..f19465896 100644
--- a/vue-app/src/views/Leaderboard.vue
+++ b/vue-app/src/views/Leaderboard.vue
@@ -9,7 +9,7 @@
           <div class="header">
             <div>
               <h2>{{ $t('leaderboard.header') }}</h2>
-              <date-period
+              <date-range
                 class="round-period"
                 v-if="round"
                 :start-date="round.startTime"
diff --git a/vue-app/src/views/RoundList.vue b/vue-app/src/views/RoundList.vue
index 006bf0838..5c5e8f44a 100644
--- a/vue-app/src/views/RoundList.vue
+++ b/vue-app/src/views/RoundList.vue
@@ -11,12 +11,11 @@
         }"
       >
         {{ $t('roundList.link1', { index: round.index }) }}
-        <date-period
+        <date-range
           class="period"
           :start-date="DateTime.fromSeconds(round.startTime)"
           :end-date="DateTime.fromSeconds(round.votingDeadline)"
-        >
-        </date-period>
+        />
       </links>
       <links
         v-else
@@ -27,12 +26,11 @@
         }"
       >
         {{ $t('roundList.link1', { index: round.index }) }}
-        <date-period
+        <date-range
           class="period"
           :start-date="DateTime.fromSeconds(round.startTime)"
           :end-date="DateTime.fromSeconds(round.votingDeadline)"
-        >
-        </date-period>
+        />
       </links>
     </div>
   </div>
@@ -42,7 +40,6 @@
 import { onMounted, ref } from 'vue'
 import { type Round, getRounds } from '@/api/rounds'
 import Links from '@/components/Links.vue'
-import DatePeriod from '@/components/DatePeriod.vue'
 import { DateTime } from 'luxon'
 
 const rounds = ref<Round[]>([])