diff --git a/TODO b/TODO
new file mode 100644
index 0000000..a03010a
--- /dev/null
+++ b/TODO
@@ -0,0 +1,21 @@
+Nastylovat:
+- header nedrží
+- footer
+- lazyload načítat o něco dříve (neli zrušit alespoň mimo galerii)
+
+Naprogramovat:
+- tlačítko "načíst další aktuality" v komponentě News (možná přidat i novou stránku /aktuality
+- přidat kalendář
+- kotvičky
+- přidat v galerii zvětsovač na obrázky
+- přidat backend
+- přidat databázi
+- přidat api
+- přidat volání na api
+
+Naplánovat:
+- kurzy + cena: vyskakovací okno na rezervaci s jménem lekce? jak to vyřešit s kalendářem? (stránka /rezervace)
+- změnit (logicky) pořadí komponent na hlavní stránce
+
+Čeká na Ondru:
+- Důležité kontakty + obrázky jak se dostat nebo vzdálenosti od městské dopravy? přidat do googlu
\ No newline at end of file
diff --git a/services/backend/backend/settings.py b/services/backend/backend/settings.py
index dac435c..dfcfc92 100644
--- a/services/backend/backend/settings.py
+++ b/services/backend/backend/settings.py
@@ -147,7 +147,9 @@ USE_TZ = True
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/5.1/howto/static-files/
 
-STATIC_URL = 'static/'
+STATIC_URL = '/static/'
+
+MEDIA_URL = '/media/'
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field
diff --git a/services/frontend/assets/css/main.css b/services/frontend/assets/css/main.css
new file mode 100644
index 0000000..0b69922
--- /dev/null
+++ b/services/frontend/assets/css/main.css
@@ -0,0 +1,204 @@
+@font-face {
+  font-family: 'Playfair Display', serif;
+  font-weight: 700;
+  font-style: normal;
+  font-display: block;
+}
+
+h1 {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 3rem;
+  color: #333; /* Dark gray */
+  text-align: center;
+  margin-bottom: 1rem;
+  margin-top: 2rem;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+}
+
+h2 {
+  font-family: 'Playfair Display', serif;
+  font-size: 1.5rem;
+  color: #CF3476;
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
+
+h3 {
+  font-family: 'Playfair Display', serif;
+  font-size: 1.5rem;
+  color: #666; /* Light gray */
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
+
+h4 {
+  font-family: 'Playfair Display', serif;
+  font-size: 1rem;
+  color: #666; /* Light gray */
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
+
+h5 {
+  font-family: 'Playfair Display', serif;
+  font-size: 1rem;
+  color: #aaa; /* Light gray */
+  margin-top: 1rem;
+}
+
+.to_left {
+  font-family: 'Playfair Display', serif;
+  font-size: 1rem;
+}
+
+.to_right {
+  font-family: 'Playfair Display', serif;
+  float: right;
+}
+
+.contact {
+  margin: 20px calc(20% - 40px) 50px;
+  min-width: 25rem;
+  border-radius: 15px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+}
+
+.contact__title {
+  text-align: center;
+  font-size: 3rem;
+  color: #333; /* Dark gray */
+  margin-bottom: 1rem;
+  font-family: 'Playfair Display', serif;
+  font-weight: bold;
+}
+
+.contact__button {
+  width: 100%;
+  color: #ffffff;
+  background-color: #CF3476;
+}
+
+.article {
+  padding: 20px;
+  min-width: 40%;
+  border-radius: 15px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  margin: 50px
+}
+
+.article__title {
+  font-family: 'Playfair Display', serif;
+  font-size: 1.5rem;
+  color: #CF3476; /* Dark gray */
+  text-align: left;
+  margin-top: 0.1rem;
+  font-weight: bold;
+}
+
+.article__date {
+  font-family: 'Playfair Display', serif;
+  font-size: 0.8rem;
+  text-align: left;
+}
+
+.article__text {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 1rem;
+  text-align: left;
+  color: #666; /* Dark gray */
+}
+
+.article__sign {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 1rem;
+  float: right;
+  color: #333; /* Dark gray */
+}
+
+.pricing-box {
+  padding: 20px;
+  text-align: center;
+  min-width: 25rem;
+  border-radius: 1rem;
+  height: 230px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  margin: 50px
+}
+
+.pricing-box:not(:last-child) {
+  margin: 20px;
+}
+
+.pricing__price {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 3.5rem;
+  color: #CF3476; /* Dark gray */
+  text-align: center;
+}
+
+.pricing__subtitle {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 1rem;
+  color: #333; /* Dark gray */
+  text-align: center;
+}
+
+.advantage {
+  min-width: 25rem;
+  border-radius: 1rem;
+  background: transparent;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  margin-top: 1.2rem;
+  margin-left: calc(20% - 2.5rem);
+  margin-right: calc(20% - 2.5rem);
+}
+
+.advantage__title {
+  font-family: 'Playfair Display', serif;
+  color: #CF3476;
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-top: 0.1rem;
+}
+
+.advantage__text {
+  font-family: 'Playfair Display', serif;
+  font-size: 1rem;
+  color: #333;
+}
+
+.about {
+  min-width: 25rem;
+  border-radius: 0;
+  background: transparent;
+}
+
+.about__parallax {
+  max-height: 36rem;
+}
+
+.about__title {
+  font-family: 'Playfair Display', serif;
+  font-size: 3rem;
+  text-align: center;
+  color: #ddd; /* Dark gray */
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+  font-weight: bold;
+}
+
+.about__subtitle {
+  font-family: 'Playfair Display', serif;
+  color: #CF3476;
+  font-size: 1.5rem;
+  text-align: center;
+  margin-bottom: 0.5rem;
+  font-weight: bold;
+}
+
+.about__text {
+  font-family: 'Playfair Display', serif;
+  color: #aaa; /* Dark gray */
+  font-size: 1.2rem;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/services/frontend/components/About.vue b/services/frontend/components/About.vue
index b8cffd3..fdef354 100644
--- a/services/frontend/components/About.vue
+++ b/services/frontend/components/About.vue
@@ -1,68 +1,39 @@
 <template>
   <v-parallax
     src="https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"
-    style="max-height: 580px"
+    class="about__parallax"
   >
-        <v-container fluid fill-height>
-    <v-row align="center" justify="center">
-      <v-col
-        cols="12"
-        md="4"
-      />
-      <v-col
-        cols="12"
-        md="8"
-        style="color: white; padding: 50px"
-      >
-        <v-card
-          class="overflow-y-auto"
-          max-height="460"
-          style="background-color: transparent"
+    <v-container fluid fill-height>
+      <v-row align="center" justify="center">
+        <v-col
+          cols="12"
+          md="4"
+        />
+        <v-col
+          cols="12"
+          md="8"
+          style="color: white; padding: 50px"
         >
-          <h1>Vítejte v tanečním klubu!</h1>
-          <h4>Tanec je vášeň!</h4>
-          <div class="subtitle">
-            Sportovní taneční klub jsme založili v roce 2016 s absolventy středoškolských tanečních kurzů taneční školy Bolero Ostrava.
-            Společně jsme se zaměřili na profesionální stránku tance, našli jsme pár aktivních tanečníků se kterými jsme začali pravidelně trénovat pohyb, krokové variace a techniku jednotlivých tanců.
-            Po roce tréninků se dostavily i první výsledky a dnes již tito mladí tanečníci skvěle reprezentují klub na celé řadě tanečních soutěží.
-            <br><br>
-            O rok později v roce 2017 jsme založili také společenský taneční klub pro dospělé, kteří by se rádi také tanci věnovali.
-            Příjemná atmosféra, zábava, ale i chuť se učit novým věcem, to jsou tři slova, které by mohly charakterizovat atmosféru v tanečních lekcích.
-            Taneční klub, ať už sportovní tak i společenský vítá všechny milovníky tance, kteří chtějí poodhalit tajemství ladných tanečních pohybů, sdílet nezaměnitelnou atmosféru a dovědět se více o taneční technice.
-            Našim přáním je, abyste na tanečním parketu jednoduše zářili.
-          </div>
-        </v-card>
-      </v-col>
-    </v-row>
-        </v-container>
+          <v-card class="about">
+            <v-card-title class="about__title">Vítejte v tanečním klubu!</v-card-title>
+            <v-card-subtitle class="about__subtitle">Tanec je vášeň!</v-card-subtitle>
+            <v-card-text class="about__text">
+              Sportovní taneční klub jsme založili v roce 2016 s absolventy středoškolských tanečních kurzů taneční školy Bolero Ostrava.
+              Společně jsme se zaměřili na profesionální stránku tance, našli jsme pár aktivních tanečníků se kterými jsme začali pravidelně trénovat pohyb, krokové variace a techniku jednotlivých tanců.
+              Po roce tréninků se dostavily i první výsledky a dnes již tito mladí tanečníci skvěle reprezentují klub na celé řadě tanečních soutěží.
+              <br><br>
+              O rok později v roce 2017 jsme založili také společenský taneční klub pro dospělé, kteří by se rádi také tanci věnovali.
+              Příjemná atmosféra, zábava, ale i chuť se učit novým věcem, to jsou tři slova, které by mohly charakterizovat atmosféru v tanečních lekcích.
+              Taneční klub, ať už sportovní tak i společenský vítá všechny milovníky tance, kteří chtějí poodhalit tajemství ladných tanečních pohybů, sdílet nezaměnitelnou atmosféru a dovědět se více o taneční technice.
+              Našim přáním je, abyste na tanečním parketu jednoduše zářili.
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
   </v-parallax>
 </template>
+
 <script setup lang="ts">
-
-</script>
-
-<style scoped>
-h1 {
-  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
-  font-size: 3rem;
-  color: #ddd; /* reverse Dark gray */
-  text-align: center;
-  margin-bottom: 1rem;
-  margin-top: 2rem;
-  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.1); /* Subtle shadow */
-}
-
-h4 {
-  font-family: 'Playfair Display', serif;
-  font-size: 1.5rem;
-  color: #aaa; /* Light gray */
-  text-align: center;
-  margin-bottom: 0.5rem;
-}
-.subtitle {
-  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
-  font-size: 1.2rem;
-  text-align: center;
-  color: #ddd; /* Dark gray */
-}
-</style>
\ No newline at end of file
+import './assets/css/main.css'
+</script>
\ No newline at end of file
diff --git a/services/frontend/components/Advantages.vue b/services/frontend/components/Advantages.vue
index 50d0ed4..5409562 100644
--- a/services/frontend/components/Advantages.vue
+++ b/services/frontend/components/Advantages.vue
@@ -1,17 +1,28 @@
 <template>
   <h1>Co dostanete s tanečním klubem</h1>
-  <h4>Výhody tanečníka</h4>
-  <v-card
+  <h2>Výhody tanečníka</h2>
+  <card
     v-for="advantage in advantages"
     :key="advantage.id"
-    :prepend-icon="advantage.icon"
-    class="advantage-box"
-    :title="advantage.title"
+    class="advantage"
   >
-    <v-card-text style="color: #666">{{ advantage.subtitle }}</v-card-text>
-  </v-card>
+    <v-row>
+      <v-col cols="12" md="1">
+        <small-icon :icon="advantage.icon" />
+      </v-col>
+      <v-col>
+        <v-card-title class="advantage__title">
+          {{advantage.title}}
+        </v-card-title>
+      </v-col>
+    </v-row>
+    <v-card-text class="advantage__text">
+      {{ advantage.subtitle }}
+    </v-card-text>
+  </card>
 </template>
 <script setup lang="ts">
+import './assets/css/main.css'
 
 const advantages = [
   {id: 1, icon: "mdi mdi-heart", title: "Zdravé tělo a mysl",
@@ -21,35 +32,4 @@ const advantages = [
   {id: 3, icon: "mdi mdi-account-group", title: "Krealitvní a zábavní lidé",
     subtitle: "Příjemná společnost a tým lidí, ce kterém se také můžete spolehnout na individuální přístup lektorů, kteří tu vždy budou právě pro Vás."},
 ]
-
-</script>
-
-<style scoped>
-h1 {
-  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
-  font-size: 3rem;
-  color: #333; /* Dark gray */
-  text-align: center;
-  margin-bottom: 1rem;
-  margin-top: 2rem;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
-}
-
-h4 {
-  font-family: 'Playfair Display', serif;
-  font-size: 1.5rem;
-  color: #666; /* Light gray */
-  text-align: center;
-  margin-bottom: 0.5rem;
-}
-
-.advantage-box {
-  min-width: 400px;
-  border-radius: 15px;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-  margin-top: 20px;
-  margin-left: calc(20% - 40px); /* Subtract half of min-width from left margin */
-  margin-right: calc(20% - 40px); /* Subtract half of min-width from right margin */
-}
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/services/frontend/components/ContactUs.vue b/services/frontend/components/ContactUs.vue
index 8fff377..e08ebbf 100644
--- a/services/frontend/components/ContactUs.vue
+++ b/services/frontend/components/ContactUs.vue
@@ -1,63 +1,67 @@
 <template>
-  <h1>Kontaktujte nás!</h1>
-  <v-card>
-  <v-form v-model="valid" @submit="sendContact">
-    <v-container>
-      <v-row>
-        <v-col
-          cols="12"
-          md="4"
-        >
-          <v-text-field
-            v-model="fullName"
-            label="Jméno a příjmení"
-          ></v-text-field>
-        </v-col>
-
-        <v-col
-          cols="12"
-          md="4"
-        >
-          <v-text-field
-            v-model="email"
-            label="Emailová adresa *"
-            required
-          ></v-text-field>
-        </v-col>
-
-        <v-col
-          cols="12"
-          md="4"
-        >
-          <v-text-field
-            v-model="phone"
-            label="Telefonní číslo"
-          ></v-text-field>
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-col>
-          <v-textarea
-            v-model="textField"
-            label="Váš dotaz *"
-            required
-          />
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-col>
-          <v-btn
-            type="submit"
+  <v-card class="contact">
+    <v-form v-model="valid" @submit="sendContact">
+      <v-container>
+        <v-card-title class="contact__title">Kontaktujte nás!</v-card-title>
+        <v-row>
+          <v-col
+            cols="12"
+            md="4"
           >
-            Poslat
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-form>
-    </v-card>
+            <v-text-field
+              v-model="fullName"
+              label="Jméno"
+              variant="underlined"
+            ></v-text-field>
+          </v-col>
+
+          <v-col
+            cols="12"
+            md="4"
+          >
+            <v-text-field
+              v-model="email"
+              label="Emailová adresa"
+              variant="underlined"
+            ></v-text-field>
+          </v-col>
+
+          <v-col
+            cols="12"
+            md="4"
+          >
+            <v-text-field
+              v-model="phone"
+              label="Telefonní číslo"
+              variant="underlined"
+            ></v-text-field>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <v-textarea
+              v-model="textField"
+              label="Váš dotaz *"
+              variant="underlined"
+            />
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <v-btn
+              class="contact__button"
+              type="submit"
+            >
+              Poslat
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-form>
+  </v-card>
 </template>
 <script setup lang="ts">
+import './assets/css/main.css'
 
 const valid = ref<boolean>(false);
 
@@ -70,16 +74,4 @@ function sendContact() {
   console.log("KONTAKT NEZASLAN");
 }
 
-</script>
-
-<style scoped>
-h1 {
-  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
-  font-size: 3rem;
-  color: #333; /* Dark gray */
-  text-align: center;
-  margin-bottom: 1rem;
-  margin-top: 2rem;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/services/frontend/components/Courses.vue b/services/frontend/components/Courses.vue
index 6a5492b..fbe3b20 100644
--- a/services/frontend/components/Courses.vue
+++ b/services/frontend/components/Courses.vue
@@ -1,6 +1,7 @@
 <template>
   <h1>Kurzy - cena</h1>
-  <h4>Vyberte, co Vám nejlépe vyhovuje</h4>
+  <h2>Vyberte, co Vám nejlépe vyhovuje</h2>
+
   <v-row>
     <v-col
         cols="12"
@@ -8,18 +9,17 @@
         v-for="course in courses"
         :key="course.id"
     >
-      <v-card
-        class="pricing-box"
-      >
-        <h2>{{ course.name }}</h2>
-        <v-card-subtitle><div class="subtitle">{{ course.time }}</div></v-card-subtitle>
-        <v-card-title><div class="price">{{ course.price }}</div></v-card-title>
-        <v-card-subtitle v-if="course.desc"><div class="subtitle">{{ course.desc }}</div></v-card-subtitle>
+      <v-card class="pricing-box">
+        <h3>{{ course.name }}</h3>
+        <v-card-subtitle><div class="pricing__subtitle">{{ course.time }}</div></v-card-subtitle>
+        <v-card-title><div class="pricing__price">{{ course.price }}</div></v-card-title>
+        <v-card-subtitle v-if="course.desc"><div class="pricing__subtitle">{{ course.desc }}</div></v-card-subtitle>
       </v-card>
     </v-col>
   </v-row>
 </template>
 <script setup lang="ts">
+import './assets/css/main.css'
 
 const courses = [
   {id: 1, name: "Sportovní taneční klub", time: "24 hodin/měsíc", price: "600 Kč", desc: false},
@@ -27,58 +27,4 @@ const courses = [
   {id: 3, name: "Volný trénink s lektorem", time: "60min / taneční pár", price: "100 Kč", desc: "Pro členy tanečního klubu"},
 ]
 
-</script>
-
-<style scoped>
-h1 {
-  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
-  font-size: 3rem;
-  color: #333; /* Dark gray */
-  text-align: center;
-  margin-bottom: 1rem;
-  margin-top: 2rem;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
-}
-
-h2 {
-  font-family: 'Playfair Display', serif;
-  font-size: 1.7rem;
-  color: #666; /* Light gray */
-}
-
-h4 {
-  font-family: 'Playfair Display', serif;
-  font-size: 1.5rem;
-  color: #666; /* Light gray */
-  text-align: center;
-  margin-bottom: 0.5rem;
-}
-
-.pricing-box {
-  padding: 20px;
-  text-align: center;
-  min-width: 80%;
-  border-radius: 15px;
-  height: 230px;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-  margin: 50px
-}
-
-.pricing-box:not(:last-child) {
-  margin: 20px;
-}
-
-.price {
-  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
-  font-size: 3.5rem;
-  color: #333; /* Dark gray */
-  text-align: center;
-}
-
-.subtitle {
-  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
-  font-size: 1rem;
-  color: #333; /* Dark gray */
-  text-align: center;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/services/frontend/components/Gallery.vue b/services/frontend/components/Gallery.vue
deleted file mode 100644
index 24a56e7..0000000
--- a/services/frontend/components/Gallery.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <h1>Galerie</h1>
-  <v-row>
-    <v-col
-      v-for="(photo, index) in photos"
-      :key="index"
-      cols="4"
-      style="padding: 0;"
-    >
-      <v-img
-        :lazy-src="photo.src"
-        :src="photo.src"
-        aspect-ratio="1"
-        cover
-      >
-        <template v-slot:placeholder>
-          <v-row>
-            <v-progress-circular
-              color="grey-lighten-5"
-              indeterminate
-            ></v-progress-circular>
-          </v-row>
-        </template>
-      </v-img>
-    </v-col>
-  </v-row>
-</template>
-<script setup lang="ts">
-
-const photos = [
-  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
-  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
-  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
-  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
-  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
-  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
-  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
-  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
-  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
-  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
-  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
-  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
-  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
-  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
-  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
-  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
-  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
-  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
-  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
-  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
-  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
-  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
-  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
-  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
-  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
-  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
-  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
-  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
-  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
-  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
-]
-
-</script>
-
-<style scoped>
-h1 {
-  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
-  font-size: 3rem;
-  color: #333; /* Dark gray */
-  text-align: center;
-  margin-bottom: 1rem;
-  margin-top: -2rem;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
-}
-</style>
\ No newline at end of file
diff --git a/services/frontend/components/News.vue b/services/frontend/components/News.vue
index 51eb6a8..91aba92 100644
--- a/services/frontend/components/News.vue
+++ b/services/frontend/components/News.vue
@@ -1,48 +1,49 @@
 <template>
-  <h1>Články</h1>
-  <v-card>
+  <h1>Aktuality</h1>
+  <h2>Přečtěte si aktuality z našeho klubu</h2>
     <v-row>
-    <v-col
-      v-for="(article, index) in articles"
-      :key="index"
-      cols="12"
-      md="6"
-    >
-      <v-row>
-        <v-col
-          cols="12"
-          md="4"
-        >
-          <v-img
-            :lazy-src="article.src"
-            :src="article.src"
-            aspect-ratio="1"
-            cover
+      <v-col
+        v-for="(article, index) in articles"
+        :key="index"
+        cols="12"
+        md="6"
+      >
+      <v-card class="article">
+        <v-row>
+          <v-col>
+            <v-img
+              :lazy-src="article.src"
+              :src="article.src"
+              aspect-ratio="1"
+              cover
+            >
+              <template v-slot:placeholder>
+                <v-row>
+                  <v-progress-circular
+                    color="grey-lighten-5"
+                    indeterminate
+                  ></v-progress-circular>
+                </v-row>
+              </template>
+            </v-img>
+          </v-col>
+          <v-col
+            cols="12"
+            md="8"
           >
-            <template v-slot:placeholder>
-              <v-row>
-                <v-progress-circular
-                  color="grey-lighten-5"
-                  indeterminate
-                ></v-progress-circular>
-              </v-row>
-            </template>
-          </v-img>
-        </v-col>
-        <v-col
-          cols="12"
-          md="8"
-        >
-            <v-row><v-card-title><h2>{{ article.title }}</h2></v-card-title></v-row>
-            <v-row><v-card-subtitle><h4>{{ article.autor }}, ({{ article.date}})</h4></v-card-subtitle></v-row>
-            <v-row><v-card-text><div class="subtitle">{{ article.desc }}</div></v-card-text></v-row>
-        </v-col>
-      </v-row>
+            <v-row class="article__title">{{ article.title }}</v-row>
+            <v-row class="article__date">{{ article.date}}</v-row>
+            <v-row class="article__text">{{ article.desc }}</v-row>
+            <v-row class="article__sign">{{ article.autor }}</v-row>
+          </v-col>
+        </v-row>
+      </v-card>
     </v-col>
   </v-row>
-  </v-card>
 </template>
 <script setup lang="ts">
+import './assets/css/main.css'
+
 const articles = [
   {
     autor: "Bebloid Obecný",
@@ -51,30 +52,12 @@ const articles = [
     src: "https://melbourneentertainmentco.com.au/wp-content/uploads/2020/04/Juan-and-Jess-600x600-profile.jpg",
     desc: "V neděli 2. 2. David potrolil sambu, kde místo tančení lítal jako zmatená včelka. Terka, ačkoliv před soutěží velice zmatkovala a sebepoškozovala se, tak na parketě předvedla výborné představení. Na další trolení se můžeme všichni těšit do Brna na konci tohoto měsíce. "
   },
+  {
+    autor: "Bebloid Obecný",
+    date: "2. 2. 2025",
+    title: "David potrolil soutěž",
+    src: "https://melbourneentertainmentco.com.au/wp-content/uploads/2020/04/Juan-and-Jess-600x600-profile.jpg",
+    desc: "V neděli 2. 2. David potrolil sambu, kde místo tančení lítal jako zmatená včelka. Terka, ačkoliv před soutěží velice zmatkovala a sebepoškozovala se, tak na parketě předvedla výborné představení. Na další trolení se můžeme všichni těšit do Brna na konci tohoto měsíce. "
+  },
 ]
-</script>
-
-<style scoped>
-h1 {
-  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
-  font-size: 3rem;
-  color: #333; /* Dark gray */
-  text-align: center;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-}
-
-h2 {
-  font-family: 'Playfair Display', serif;
-  text-align: center;
-  font-size: 1.7rem;
-  color: #666; /* Light gray */
-}
-
-.subtitle {
-  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
-  font-size: 1rem;
-  color: #333; /* Dark gray */
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/services/frontend/components/Trainers.vue b/services/frontend/components/Trainers.vue
index 674fb87..da739b7 100644
--- a/services/frontend/components/Trainers.vue
+++ b/services/frontend/components/Trainers.vue
@@ -1,5 +1,6 @@
 <template>
   <h1>Naši trenéři a lektoři</h1>
+  <h2>Seznamte se s námi!</h2>
     <v-row style="margin-bottom: 2rem;">
       <v-col class="text-center" cols="12" md="3" v-for="lector in lectors" :key="lector.id">
           <v-avatar
@@ -11,16 +12,18 @@
             <v-img :src="lector.img" cover></v-img>
           </v-avatar>
         <h2>{{lector.name}}</h2>
-        <div class="subtitle">{{ lector.desc }}</div>
+        <h4>{{ lector.desc }}</h4>
       </v-col>
     </v-row>
 </template>
 <script setup lang="ts">
+import './assets/css/main.css'
+
 const lectors = [
   {
     id: 1,
     name: "Ondřej Gilar",
-    img: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg",
+    img: "/Beblik.jpg",
     desc: "Trenér - latinskoamerické tance a Pro-AM",
   },
   {
@@ -42,30 +45,4 @@ const lectors = [
     desc: "Lektorka - tance pro děti",
   },
 ]
-</script>
-
-<style scoped>
-h1 {
-  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
-  font-size: 3rem;
-  color: #333; /* Dark gray */
-  text-align: center;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-}
-
-h2 {
-  font-family: 'Playfair Display', serif;
-  text-align: center;
-  font-size: 1.7rem;
-  color: #666; /* Light gray */
-}
-
-.subtitle {
-  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
-  font-size: 1rem;
-  color: #333; /* Dark gray */
-  text-align: center;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/services/frontend/components/menu/Footer.vue b/services/frontend/components/menu/Footer.vue
index 8fca1c1..cf66ca3 100644
--- a/services/frontend/components/menu/Footer.vue
+++ b/services/frontend/components/menu/Footer.vue
@@ -8,7 +8,7 @@
           cols="12"
           md="4"
         >
-          <h4>Kontakt</h4>
+          <h5>Kontakt</h5>
           <v-divider :thickness="3" />
           <div class="footer-text">Tomáš Ožana</div>
           <div class="footer-text">Zimmlerova 2893/47, Ostrava</div>
@@ -20,27 +20,26 @@
           cols="12"
           md="4"
         >
-          <h4>Tréningové hodiny</h4>
+          <h5>Tréningové hodiny</h5>
           <v-divider :thickness="3" />
-          <div class="footer-text">Pondělí: <span class="timespan">16:30 - 18:30 (VS)</span></div>
-          <div class="footer-text">Úterý: <span class="timespan">16:30 - 18:30 (VS)</span></div>
-          <div class="footer-text">Středa: <span class="timespan">16:30 - 18:30 (VS)</span></div>
-          <div class="footer-text">Čtvrtek: <span class="timespan">16:30 - 18:30 (VS)</span></div>
-          <div class="footer-text">Pátek: <span class="timespan">16:30 - 18:30 (VS)</span></div>
-          <div class="footer-text">Sobota: <span class="timespan">16:30 - 18:30 (VS)</span></div>
-          <div class="footer-text">Neděle: <span class="timespan">16:30 - 18:30 (VS)</span></div>
+          <div class="to_left">Pondělí: <span class="to_right">16:30 - 18:30 (VS)</span></div>
+          <div class="to_left">Úterý: <span class="to_right">16:30 - 18:30 (VS)</span></div>
+          <div class="to_left">Středa: <span class="to_right">16:30 - 18:30 (VS)</span></div>
+          <div class="to_left">Čtvrtek: <span class="to_right">16:30 - 18:30 (VS)</span></div>
+          <div class="to_left">Pátek: <span class="to_right">16:30 - 18:30 (VS)</span></div>
+          <div class="to_left">Sobota: <span class="to_right">16:30 - 18:30 (VS)</span></div>
+          <div class="to_left">Neděle: <span class="to_right">16:30 - 18:30 (VS)</span></div>
         </v-col>
 
         <v-col
           cols="12"
           md="4"
         >
-          <h4>Sociální sítě</h4>
+          <h5>Sociální sítě</h5>
           <v-divider :thickness="3" />
-<!--          https://pictogrammers.com/library/mdi/icon/youtube/-->
-          <span class="mdi mdi-facebook" style="font-size: 60px"></span>
-          <span class="mdi mdi-instagram" style="font-size: 60px"></span>
-          <span class="mdi mdi-youtube" style="font-size: 60px"></span>
+          <big-icon icon="mdi-facebook" />
+          <big-icon icon="mdi-instagram" />
+          <big-icon icon="mdi-youtube" />
         </v-col>
       </v-row>
       <v-divider :thickness="3" style="margin-top: 60px" />
@@ -60,32 +59,6 @@
   </v-footer>
 </template>
 <script setup lang="ts">
+import './assets/css/main.css'
 
-</script>
-
-<style scoped>
-h4 {
-  font-family: 'Playfair Display', serif;
-  font-size: 1.5rem;
-  color: #aaa; /* Light gray */
-  text-align: center;
-  margin-bottom: 0.5rem;
-}
-
-h5 {
-  font-family: 'Playfair Display', serif;
-  font-size: 1rem;
-  color: #aaa; /* Light gray */
-  margin-top: 1rem;
-}
-
-.footer-text {
-  font-family: 'Playfair Display', serif;
-  font-size: 1rem;
-  color: #aaa; /* Light gray */
-}
-
-.timespan {
-  float: right; /* Aligns the timespan to the right */
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/services/frontend/components/menu/Header.vue b/services/frontend/components/menu/Header.vue
index ddfe5e1..4edad7b 100644
--- a/services/frontend/components/menu/Header.vue
+++ b/services/frontend/components/menu/Header.vue
@@ -1,57 +1,120 @@
 <template>
-    <v-app-bar  style="position: sticky">
-     <v-app-bar-nav-icon
-         @click="drawer = !drawer"
-         class="d-flex d-sm-none"
-     />
-      <span class="mdi mdi-dance-ballroom" style="font-size: 60px"></span>
-      Taneční klub Ostrava
-          <v-tabs
-            v-model="tab"
-            align-with-title
-            class="d-none d-sm-flex"
-          >
-
-            <v-tab
-              v-for="item in items"
-              :key="item"
-            >
-              {{ item }}
-            </v-tab>
-          </v-tabs>
-    </v-app-bar>
-
-    <!-- Add a navigation bar -->
-    <v-navigation-drawer
-      v-model="drawer"
-      absolute
-      fixed
-      temporary
-    >
-      <v-list
-        nav
-        dense
+    <v-layout>
+      <v-app-bar
+        color="primary"
+        style="position: sticky"
       >
-        <v-list-item>
-          <v-list-item v-for="(item, index) in items">
-            <v-list-item-title @click="tab = index">{{ item }}</v-list-item-title>
+        <v-app-bar-nav-icon
+            @click="drawer = !drawer"
+            class="d-flex d-sm-none"
+        />
+        <a href=""><big-icon icon="mdi-dance-ballroom" /></a>
+        <v-app-bar-title>Taneční klub Ostrava</v-app-bar-title>
+
+        <v-tabs
+          v-for="(tab, index) in tabs" :key="index"
+          v-model="currentTab"
+          align-with-title
+          class="d-none d-sm-flex"
+          color="color"
+        >
+          <v-tab :text="tab.name" :value="tab.name" @click="useGoTo(tab.ref)"></v-tab>
+        </v-tabs>
+
+
+<!--        <v-col-->
+<!--          class="text-right"-->
+<!--          @click="toggleTheme"-->
+<!--        >-->
+<!--          <big-icon icon="mdi-lightbulb-cfl"/>-->
+<!--        </v-col>-->
+      </v-app-bar>
+
+      <v-fab
+        :key="currentTab.ref"
+        class="ms-4 mb-4"
+      ></v-fab>
+
+      <v-navigation-drawer
+        v-model="drawer"
+        absolute
+        fixed
+        left
+      >
+        <v-list
+          nav
+          dense
+        >
+          <v-list-item>
+            <v-list-item v-for="(tab, index) in tabs" :key="index">
+              <v-list-item-title @click="useGoTo(tab.ref)">{{ tab.name }}</v-list-item-title>
+            </v-list-item>
           </v-list-item>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
+        </v-list>
+      </v-navigation-drawer>
+
+    </v-layout>
 </template>
 
-<script>
-export default {
-  el: '#app',
-  data () {
-    return {
-      drawer: false,
-      tab: null,
-      items: [
-        'O nás', "Trenéři", 'Kurzy', 'Galerie', 'Aktuality', 'Kontakty',
-      ],
+<script setup lang="ts">
+function waitForElement (selector: string, timeout = 2000) : Promise<Element> {
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+    // eslint-disable-next-line prefer-const
+    let observer: MutationObserver;
+
+    function checkElement () {
+      const element = document.querySelector(selector);
+
+      if (element) {
+        resolve(element);
+        observer.disconnect(); // Stop observing DOM changes
+      } else if (Date.now() - startTime >= timeout) {
+        reject(new Error(`Timeout exceeded while waiting for element with selector '${selector}'`));
+        observer.disconnect(); // Stop observing DOM changes
+      }
     }
-  }
+
+    observer = new MutationObserver(checkElement);
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    checkElement(); // Check initially in case the element is already present
+  });
 }
+
+
+async function useGoTo (selector: string, props: {offset? :number} = {}): Promise<void> {
+  console.log(selector);
+  let element: Element;
+  try {
+    element = await waitForElement(selector);
+  } catch {
+    // element not found
+    return;
+  }
+  const yOffset = props?.offset ?? -80;
+  const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
+
+  window.scrollTo({ top: y, behavior: "smooth" });
+}
+
+const currentTab = ref({name: 'O nás', ref: "#about", href: "o-nas"});
+const drawer = ref(null)
+const tabs = [
+  {name: 'O nás', ref: "#about", href: "o-nas"},
+  {name: "Trenéři", ref: "#trainers", href: "treneri"},
+  {name: 'Kurzy', ref: "#courses", href: "kurzy"},
+  {name: 'Galerie', ref: "#gallery", href: "galerie"},
+  {name: 'Aktuality', ref: "#article", href: "clanky"},
+  {name: 'Kontakty', ref: "#contact", href: "kontakt"},
+]
+
+// import { useTheme } from 'vuetify'
+//
+// const theme = useTheme()
+//
+// function toggleTheme () {
+//   theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+// }
+
 </script>
\ No newline at end of file
diff --git a/services/frontend/layouts/default.vue b/services/frontend/layouts/default.vue
index ce0aada..32c46a5 100644
--- a/services/frontend/layouts/default.vue
+++ b/services/frontend/layouts/default.vue
@@ -1,11 +1,11 @@
 <template>
   <v-layout>
     <v-app app>
-      <menu-header/>
+      <menu-header />
       <v-main>
         <slot />
       </v-main>
-      <menu-footer/>
+      <menu-footer />
     </v-app>
   </v-layout>
 </template>
\ No newline at end of file
diff --git a/services/frontend/pages/galerie.vue b/services/frontend/pages/galerie.vue
index a1a0736..90c7dbc 100644
--- a/services/frontend/pages/galerie.vue
+++ b/services/frontend/pages/galerie.vue
@@ -1,10 +1,63 @@
 <template>
-  <gallery/>
+  <h1>Galerie</h1>
+  <v-row>
+    <v-col
+      v-for="(photo, index) in photos"
+      :key="index"
+      cols="4"
+      style="padding: 0;"
+    >
+      <v-img
+        :lazy-src="photo.src"
+        :src="photo.src"
+        aspect-ratio="1"
+        cover
+      >
+        <template v-slot:placeholder>
+          <v-row>
+            <v-progress-circular
+              color="grey-lighten-5"
+              indeterminate
+            ></v-progress-circular>
+          </v-row>
+        </template>
+      </v-img>
+    </v-col>
+  </v-row>
 </template>
 <script setup lang="ts">
+import './assets/css/main.css'
 
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+const photos = [
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
+]
+</script>
\ No newline at end of file
diff --git a/services/frontend/pages/index.vue b/services/frontend/pages/index.vue
index 9cdf637..1aabfcf 100644
--- a/services/frontend/pages/index.vue
+++ b/services/frontend/pages/index.vue
@@ -1,22 +1,20 @@
 <template>
   <v-parallax
     src="https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"
-    style="margin-top: -80px"
   >
-    <div class="d-flex flex-column fill-height justify-center align-center text-white">
-      <h1 class="text-h3 font-weight-thin mb-4">
+    <div class="d-flex flex-column fill-height justify-center">
+      <h1 class="text-white">
         Taneční klub Ostrava
       </h1>
-      <h2 class="subheading">
+      <h2>
         Naučíme Vás tančit!
       </h2>
     </div>
   </v-parallax>
-  <news />
-  <advantages/>
-  <courses />
-  <about />
-  <trainers/>
-  <references/>
-  <contact-us/>
+  <advantages id="advantages"/>
+  <courses id="courses"/>
+  <news id="article"/>
+  <about id="about"/>
+  <trainers id="trainers"/>
+  <contact-us id="contact"/>
 </template>
\ No newline at end of file
diff --git a/services/frontend/pages/kontakty.vue b/services/frontend/pages/kontakty.vue
new file mode 100644
index 0000000..40a083b
--- /dev/null
+++ b/services/frontend/pages/kontakty.vue
@@ -0,0 +1,14 @@
+<template>
+  <contact-us />
+  <iframe
+      src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d160.87512165223046!2d18.205641416752258!3d49.82362861573854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1scs!2scz!4v1739304600235!5m2!1scs!2scz"
+      width="100%" height="500"
+      style="border:0;"
+      loading="lazy"
+      referrerpolicy="no-referrer-when-downgrade"
+  />
+</template>
+<script setup lang="ts">
+import './assets/css/main.css'
+
+</script>
\ No newline at end of file
diff --git a/services/frontend/pages/kurzy.vue b/services/frontend/pages/kurzy.vue
deleted file mode 100644
index ec4a1b4..0000000
--- a/services/frontend/pages/kurzy.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-
-</template>
-<script setup lang="ts">
-
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/services/frontend/pages/treneri.vue b/services/frontend/pages/treneri.vue
deleted file mode 100644
index 8ec9bc7..0000000
--- a/services/frontend/pages/treneri.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <h1>Naši trenéři a lektoři</h1>
-  <v-card>
-    <v-row v-for="(lector, index) in lectors" :key="index">
-      <v-col
-      style="padding: 0;" >
-        <v-img
-          :src="lector.background"
-          cover
-        >
-          <v-col style="text-align: center" cols="12" md="4">
-            <v-avatar
-              color="grey"
-              rounded="1"
-              size="300"
-              style="margin: 30px"
-            >
-              <v-img :src="lector.img" cover></v-img>
-            </v-avatar>
-            <h2>{{lector.name}}</h2>
-            <div class="subtitle">{{ lector.desc }}</div>
-            <v-divider :thickness="3" />
-            <h4>{{lector.story}}</h4>
-          </v-col>
-        </v-img>
-      </v-col>
-    </v-row>
-  </v-card>
-</template>
-<script setup lang="ts">
-const lectors = [
-  {
-    name: "Ondřej Gilar",
-    img: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg",
-    desc: "Trenér - latinskoamerické tance a Pro-AM",
-    background: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg",
-    story: "Něco velice zajímavého sepsané dlouhým textem, který snad někdo přečte, protože je to určitě zajímavé. Nová koloběžka bylo vrhnuta do řeky hned vedle pískoviště na počítači.",
-  },
-  {
-    name: "Leona Hruštincová",
-    img: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg",
-    desc: "Lektorka - tance pro děti",
-    background: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg",
-    story: "Něco velice zajímavého sepsané dlouhým textem, který snad někdo přečte, protože je to určitě zajímavé. Nová koloběžka bylo vrhnuta do řeky hned vedle pískoviště na počítači.",
-  },
-]
-</script>
-
-<style scoped>
-h1 {
-  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
-  font-size: 3rem;
-  color: #333; /* Dark gray */
-  text-align: center;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
-  margin-top: -2rem;
-}
-
-h2 {
-  font-family: 'Playfair Display', serif;
-  font-size: 2rem;
-  color: #666; /* Light gray */
-}
-
-.subtitle {
-  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
-  font-size: 1.5rem;
-  color: #333; /* Dark gray */
-}
-</style>
\ No newline at end of file
diff --git a/services/frontend/plugins/vuetify.ts b/services/frontend/plugins/vuetify.ts
index dd20302..7326571 100644
--- a/services/frontend/plugins/vuetify.ts
+++ b/services/frontend/plugins/vuetify.ts
@@ -3,8 +3,57 @@ import '@mdi/font/css/materialdesignicons.css'
 
 import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
+import { aliases, mdi } from 'vuetify/iconsets/mdi'
+import {VIcon} from "vuetify/components";
 
 export default defineNuxtPlugin((app) => {
-  const vuetify = createVuetify({})
+  const vuetify = createVuetify({
+    icons: {  // https://pictogrammers.com/library/mdi/icon/youtube/
+      defaultSet: 'mdi',
+    },
+    theme: {
+      defaultTheme: 'light',
+      themes: {
+        light: {
+          colors: {
+            background: '#ffffff',
+            primary: '#303030',
+            'primary-darken': '#d0d0d0',
+            secondary: '#606060',
+            'secondary-darken': '#a0a0a0',
+            color: '#CF3476',
+            light: '#d0d0d0',
+            dark: '#303030'
+          },
+        },
+        // dark: {
+        //   colors: {
+        //     background: '#000',
+        //     primary: '#d0d0d0',
+        //     'primary-darken': '#303030',
+        //     secondary: '#a0a0a0',
+        //     'secondary-darken': '#606060',
+        //     color: '#CF3476',
+        //   }
+        // }
+      },
+    },
+    aliases: {
+      SmallIcon: VIcon,
+      BigIcon: VIcon,
+    },
+    defaults: {
+      SmallIcon: {
+        color: 'color',
+        style: [{ 'margin-left': '20px', 'margin-top': '15px', 'font-size': '30px'}]
+      },
+      BigIcon: {
+        color: 'color',
+        style: [{ margin: '20px', 'font-size': '60px'}]
+      },
+    },
+  })
+
+
   app.vueApp.use(vuetify)
 })
diff --git a/services/frontend/public/Beblik.jpg b/services/frontend/public/Beblik.jpg
new file mode 100644
index 0000000..2b0f4db
Binary files /dev/null and b/services/frontend/public/Beblik.jpg differ