diff --git a/src/main/webapp/app/core/jhi-navbar/jhi-navbar.vue b/src/main/webapp/app/core/jhi-navbar/jhi-navbar.vue
index eab4e2f..30cd715 100644
--- a/src/main/webapp/app/core/jhi-navbar/jhi-navbar.vue
+++ b/src/main/webapp/app/core/jhi-navbar/jhi-navbar.vue
@@ -21,19 +21,25 @@
         <b-nav-item to="/" exact>
           <span>
             <font-awesome-icon icon="home" />
-            <span>Home</span>
+            <span>Current Event</span>
           </span>
         </b-nav-item>
-        <b-nav-item-dropdown right id="entity-menu" v-if="authenticated" active-class="active" class="pointer" data-cy="entity">
-          <template #button-content>
-            <span class="navbar-dropdown-menu">
-              <font-awesome-icon icon="th-list" />
-              <span class="no-bold">Entities</span>
-            </span>
-          </template>
-          <entities-menu></entities-menu>
-          <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
-        </b-nav-item-dropdown>
+        <b-nav-item to="/event" exact>
+          <span>
+            <font-awesome-icon icon="home" />
+            <span>All Events</span>
+          </span>
+        </b-nav-item>
+        <!--        <b-nav-item-dropdown right id="entity-menu" v-if="authenticated" active-class="active" class="pointer" data-cy="entity">-->
+        <!--          <template #button-content>-->
+        <!--            <span class="navbar-dropdown-menu">-->
+        <!--              <font-awesome-icon icon="th-list" />-->
+        <!--              <span class="no-bold">Entities</span>-->
+        <!--            </span>-->
+        <!--          </template>-->
+        <!--          <entities-menu></entities-menu>-->
+        <!--&lt;!&ndash;           jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here&ndash;&gt;-->
+        <!--        </b-nav-item-dropdown>-->
         <b-nav-item-dropdown
           right
           id="admin-menu"
diff --git a/src/main/webapp/app/entities/event/event-details.component.ts b/src/main/webapp/app/entities/event/event-details.component.ts
index 0642abf..aacf773 100644
--- a/src/main/webapp/app/entities/event/event-details.component.ts
+++ b/src/main/webapp/app/entities/event/event-details.component.ts
@@ -5,6 +5,8 @@ import EventService from './event.service';
 import useDataUtils from '@/shared/data/data-utils.service';
 import { type IEvent } from '@/shared/model/event.model';
 import { useAlertService } from '@/shared/alert/alert.service';
+import { useDateFormat } from '@/shared/composables';
+import type { IRegistration } from '@/shared/model/registration.model';
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
@@ -12,7 +14,7 @@ export default defineComponent({
   setup() {
     const eventService = inject('eventService', () => new EventService());
     const alertService = inject('alertService', () => useAlertService(), true);
-
+    const { formatDateShort } = useDateFormat();
     const dataUtils = useDataUtils();
 
     const route = useRoute();
@@ -20,27 +22,47 @@ export default defineComponent({
 
     const previousState = () => router.go(-1);
     const event: Ref<IEvent> = ref({});
+    const sortedAndIndexedRegistrations: Ref<IRegistration[]> = ref([]);
 
-    const retrieveEvent = async eventId => {
+    const retrieveEvent = async (eventId: string) => {
       try {
         const res = await eventService().find(eventId);
         event.value = res;
+        // sortedAndIndexedRegistrations.value = res.registrations;
+        sortedAndIndexedRegistrations.value = res.registrations.sort(
+          (a, b) => new Date(a.dateTime).getTime() - new Date(b.dateTime).getTime(),
+        );
       } catch (error) {
         alertService.showHttpError(error.response);
       }
     };
 
     if (route.params?.eventId) {
-      retrieveEvent(route.params.eventId);
+      retrieveEvent(route.params.eventId as string);
     }
 
+    // const sortedAndIndexedRegistrations = () => {
+    //   console.log('asdfasdfasdf', event.value.registrations)
+    //   console.log('asdfasdfasdf', event.value)
+    //   return [...(event.value.registrations || [])].sort((a, b) =>
+    //     new Date(a.dateTime).getTime() - new Date(b.dateTime).getTime()
+    //   );
+    // };
+
+    const getRegistrationIndex = (index: number) => {
+      const activeCount = sortedAndIndexedRegistrations.value.slice(0, index).filter(r => r.active).length;
+      return sortedAndIndexedRegistrations.value[index].active ? activeCount + 1 : '';
+    };
+
+    // console.log('asdfasdf', sortedAndIndexedRegistrations())
     return {
       alertService,
       event,
-
       ...dataUtils,
-
+      formatDateShort,
       previousState,
+      sortedAndIndexedRegistrations,
+      getRegistrationIndex,
     };
   },
 });
diff --git a/src/main/webapp/app/entities/event/event-details.vue b/src/main/webapp/app/entities/event/event-details.vue
index e361043..0b11d31 100644
--- a/src/main/webapp/app/entities/event/event-details.vue
+++ b/src/main/webapp/app/entities/event/event-details.vue
@@ -35,29 +35,93 @@
             <span>{{ event.comment }}</span>
           </dd>
         </dl>
-        <!-- Dodajemy sekcję dla rejestracji -->
-        <h3>Rejestracje</h3>
-        <ul>
-          <li v-for="registration in event.registrations" :key="registration.id">
-            {{ registration.playerName }}
-            <!-- lub inne pola, które chcesz pokazać -->
-          </li>
-        </ul>
-
         <router-link :to="{ name: 'RegistrationCreateForEvent', params: { eventId: event.id } }" custom v-slot="{ navigate }">
           <button @click="navigate" class="btn btn-primary">
-            <font-awesome-icon icon="plus"></font-awesome-icon>&nbsp;<span>Dodaj Rejestrację</span>
+            <font-awesome-icon icon="plus"></font-awesome-icon>&nbsp;<span>Dołącz do wydarzenia</span>
           </button>
         </router-link>
+        <div class="table-responsive" v-if="event.registrations && event.registrations.length > 0">
+          <table class="table table-striped" aria-describedby="event.registrations">
+            <thead>
+              <tr>
+                <th scope="col"><span>#</span></th>
+                <th scope="col"><span>Date Time</span></th>
+                <th scope="col"><span>Player Name</span></th>
+                <th scope="col"><span>Comment</span></th>
+                <th scope="col"><span>Active</span></th>
+                <th scope="col"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(registration, index) in sortedAndIndexedRegistrations" :key="registration.id" data-cy="entityTable">
+                <td>
+                  <!-- Display row number or empty if not active -->
+                  {{ getRegistrationIndex(index) }}
+                </td>
+                <td>{{ formatDateShort(registration.dateTime) || '' }}</td>
+                <td>{{ registration.playerName }}</td>
+                <td>{{ registration.comment }}</td>
+                <td>{{ registration.active }}</td>
 
-        <button type="submit" @click.prevent="previousState()" class="btn btn-info" data-cy="entityDetailsBackButton">
-          <font-awesome-icon icon="arrow-left"></font-awesome-icon>&nbsp;<span>Back</span>
-        </button>
-        <router-link v-if="event.id" :to="{ name: 'EventEdit', params: { eventId: event.id } }" custom v-slot="{ navigate }">
-          <button @click="navigate" class="btn btn-primary">
-            <font-awesome-icon icon="pencil-alt"></font-awesome-icon>&nbsp;<span>Edit</span>
-          </button>
-        </router-link>
+                <td class="text-right">
+                  <div class="btn-group">
+                    <router-link
+                      :to="{ name: 'RegistrationView', params: { registrationId: registration.id } }"
+                      custom
+                      v-slot="{ navigate }"
+                    >
+                      <button @click="navigate" class="btn btn-info btn-sm details" data-cy="entityDetailsButton">
+                        <font-awesome-icon icon="eye"></font-awesome-icon>
+                        <span class="d-none d-md-inline">View</span>
+                      </button>
+                    </router-link>
+                    <!--                  <b-button-->
+                    <!--                    @click="prepareRemove(registration)"-->
+                    <!--                    variant="danger"-->
+                    <!--                    class="btn btn-sm"-->
+                    <!--                    data-cy="entityDeleteButton"-->
+                    <!--                    v-b-modal.removeEntity-->
+                    <!--                  >-->
+                    <!--                    <font-awesome-icon icon="times"></font-awesome-icon>-->
+                    <!--                    <span class="d-none d-md-inline">Delete</span>-->
+                    <!--                  </b-button>-->
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <b-modal ref="removeEntity" id="removeEntity">
+          <template #modal-title>
+            <span id="sasiedziApp.registration.delete.question" data-cy="registrationDeleteDialogHeading">Confirm delete operation</span>
+          </template>
+          <div class="modal-body">
+            <p id="jhi-delete-registration-heading">Are you sure you want to delete Registration {{ removeId }}?</p>
+          </div>
+          <template #modal-footer>
+            <div>
+              <button type="button" class="btn btn-secondary" @click="closeDialog()">Cancel</button>
+              <button
+                type="button"
+                class="btn btn-primary"
+                id="jhi-confirm-delete-registration"
+                data-cy="entityConfirmDeleteButton"
+                @click="removeRegistration()"
+              >
+                Delete
+              </button>
+            </div>
+          </template>
+        </b-modal>
+
+        <!--        <button type="submit" @click.prevent="previousState()" class="btn btn-info" data-cy="entityDetailsBackButton">-->
+        <!--          <font-awesome-icon icon="arrow-left"></font-awesome-icon>&nbsp;<span>Back</span>-->
+        <!--        </button>-->
+        <!--        <router-link v-if="event.id" :to="{ name: 'EventEdit', params: { eventId: event.id } }" custom v-slot="{ navigate }">-->
+        <!--          <button @click="navigate" class="btn btn-primary">-->
+        <!--            <font-awesome-icon icon="pencil-alt"></font-awesome-icon>&nbsp;<span>Edit</span>-->
+        <!--          </button>-->
+        <!--        </router-link>-->
       </div>
     </div>
   </div>
diff --git a/src/main/webapp/app/entities/event/event.component.ts b/src/main/webapp/app/entities/event/event.component.ts
index c850b0e..7966c71 100644
--- a/src/main/webapp/app/entities/event/event.component.ts
+++ b/src/main/webapp/app/entities/event/event.component.ts
@@ -1,9 +1,11 @@
-import { type Ref, defineComponent, inject, onMounted, ref } from 'vue';
+import { type Ref, defineComponent, inject, onMounted, ref, computed } from 'vue';
 
 import EventService from './event.service';
 import { type IEvent } from '@/shared/model/event.model';
 import useDataUtils from '@/shared/data/data-utils.service';
 import { useAlertService } from '@/shared/alert/alert.service';
+import { useDateFormat } from '@/shared/composables';
+import type AccountService from '@/account/account.service';
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
@@ -12,8 +14,11 @@ export default defineComponent({
     const dataUtils = useDataUtils();
     const eventService = inject('eventService', () => new EventService());
     const alertService = inject('alertService', () => useAlertService(), true);
-
+    const accountService = inject<AccountService>('accountService');
     const events: Ref<IEvent[]> = ref([]);
+    const authenticated = computed(() => store.authenticated);
+    const hasAnyAuthorityValues: Ref<any> = ref({});
+    const dateFormat = useDateFormat();
 
     const isFetching = ref(false);
 
@@ -67,12 +72,26 @@ export default defineComponent({
       isFetching,
       retrieveEvents,
       clear,
+      accountService,
+      hasAnyAuthorityValues,
+      authenticated,
       removeId,
       removeEntity,
       prepareRemove,
       closeDialog,
       removeEvent,
       ...dataUtils,
+      ...dateFormat,
     };
   },
+  methods: {
+    hasAnyAuthority(authorities: any): boolean {
+      this.accountService.hasAnyAuthorityAndCheckAuth(authorities).then(value => {
+        if (this.hasAnyAuthorityValues[authorities] !== value) {
+          this.hasAnyAuthorityValues = { ...this.hasAnyAuthorityValues, [authorities]: value };
+        }
+      });
+      return this.hasAnyAuthorityValues[authorities] ?? false;
+    },
+  },
 });
diff --git a/src/main/webapp/app/entities/event/event.vue b/src/main/webapp/app/entities/event/event.vue
index a2d71a1..0a67fb7 100644
--- a/src/main/webapp/app/entities/event/event.vue
+++ b/src/main/webapp/app/entities/event/event.vue
@@ -6,7 +6,7 @@
         <button class="btn btn-info mr-2" @click="handleSyncList" :disabled="isFetching">
           <font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon> <span>Refresh list</span>
         </button>
-        <router-link :to="{ name: 'EventCreate' }" custom v-slot="{ navigate }">
+        <router-link :to="{ name: 'EventCreate' }" custom v-slot="{ navigate }" v-if="hasAnyAuthority('ROLE_ADMIN')">
           <button
             @click="navigate"
             id="jh-create-entity"
@@ -54,7 +54,12 @@
                     <span class="d-none d-md-inline">View</span>
                   </button>
                 </router-link>
-                <router-link :to="{ name: 'EventEdit', params: { eventId: event.id } }" custom v-slot="{ navigate }">
+                <router-link
+                  :to="{ name: 'EventEdit', params: { eventId: event.id } }"
+                  custom
+                  v-slot="{ navigate }"
+                  v-if="hasAnyAuthority('ROLE_ADMIN')"
+                >
                   <button @click="navigate" class="btn btn-primary btn-sm edit" data-cy="entityEditButton">
                     <font-awesome-icon icon="pencil-alt"></font-awesome-icon>
                     <span class="d-none d-md-inline">Edit</span>
@@ -65,6 +70,7 @@
                   variant="danger"
                   class="btn btn-sm"
                   data-cy="entityDeleteButton"
+                  v-if="hasAnyAuthority('ROLE_ADMIN')"
                   v-b-modal.removeEntity
                 >
                   <font-awesome-icon icon="times"></font-awesome-icon>
diff --git a/src/main/webapp/app/entities/registration/registration-details.component.ts b/src/main/webapp/app/entities/registration/registration-details.component.ts
index c0093bc..c836fb3 100644
--- a/src/main/webapp/app/entities/registration/registration-details.component.ts
+++ b/src/main/webapp/app/entities/registration/registration-details.component.ts
@@ -44,6 +44,7 @@ export default defineComponent({
       ...dataUtils,
 
       previousState,
+      ...dateFormat,
     };
   },
 });
diff --git a/src/main/webapp/app/entities/registration/registration-details.vue b/src/main/webapp/app/entities/registration/registration-details.vue
index 1c0c3f3..8684a84 100644
--- a/src/main/webapp/app/entities/registration/registration-details.vue
+++ b/src/main/webapp/app/entities/registration/registration-details.vue
@@ -2,40 +2,44 @@
   <div class="row justify-content-center">
     <div class="col-8">
       <div v-if="registration">
-        <h2 class="jh-entity-heading" data-cy="registrationDetailsHeading"><span>Registration</span> {{ registration.id }}</h2>
+        <h2 class="jh-entity-heading" data-cy="registrationDetailsHeading">
+          <span>Rejestracja na wydarzenie </span> {{ registration.event.name }}
+        </h2>
         <dl class="row jh-entity-details">
           <dt>
-            <span>Date Time</span>
+            <span>Data</span>
           </dt>
           <dd>
             <span v-if="registration.dateTime">{{ formatDateLong(registration.dateTime) }}</span>
           </dd>
           <dt>
-            <span>Active</span>
+            <span>Aktywna</span>
           </dt>
           <dd>
             <span>{{ registration.active }}</span>
           </dd>
           <dt>
-            <span>Player Name</span>
+            <span>Imię i Nazwisko gracza</span>
           </dt>
           <dd>
             <span>{{ registration.playerName }}</span>
           </dd>
           <dt>
-            <span>Comment</span>
+            <span>Komentarz</span>
           </dt>
           <dd>
             <span>{{ registration.comment }}</span>
           </dd>
           <dt>
-            <span>User</span>
+            <span>Osoba rejestrująca/płacąca</span>
           </dt>
           <dd>
-            {{ registration.user ? registration.user.login : '' }}
+            {{
+              registration.user ? registration.user.firstName + ' ' + registration.user.lastName + ' (' + registration.user.login + ')' : ''
+            }}
           </dd>
           <dt>
-            <span>Event</span>
+            <span>Wydarzenie</span>
           </dt>
           <dd>
             <div v-if="registration.event">