diff --git a/TODO b/TODO
index 6a81097..5dae3b0 100644
--- a/TODO
+++ b/TODO
@@ -1,24 +1,11 @@
 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
-    - kontakty
-    - clanky
-    - kalendar
-- 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/articles/2025/02/19/terkadavid.jpg b/services/backend/articles/2025/02/19/terkadavid.jpg
new file mode 100644
index 0000000..5089136
Binary files /dev/null and b/services/backend/articles/2025/02/19/terkadavid.jpg differ
diff --git a/services/backend/backend/settings.py b/services/backend/backend/settings.py
index dfcfc92..1a8d008 100644
--- a/services/backend/backend/settings.py
+++ b/services/backend/backend/settings.py
@@ -46,11 +46,15 @@ DEBUG_TOOLBAR_PANELS = [
 ]
 
 ALLOWED_HOSTS = [
-    "0.0.0.0", "localhost", "127.0.0.1",
+    "localhost",
 ]
 
 INTERNAL_IPS = [
-    "0.0.0.0", "localhost", "127.0.0.1",
+    "localhost",
+]
+
+CORS_ALLOWED_ORIGINS = [
+    "http://localhost:8000",
 ]
 
 # Application definition
@@ -62,6 +66,7 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'tko.apps.TkoConfig',
     "debug_toolbar",
     'rest_framework',
 ]
diff --git a/services/backend/backend/urls.py b/services/backend/backend/urls.py
index 2d5d449..2fd02fb 100644
--- a/services/backend/backend/urls.py
+++ b/services/backend/backend/urls.py
@@ -15,10 +15,14 @@ Including another URLconf
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.contrib import admin
-from django.urls import include, path
+from django.urls import path
 from debug_toolbar.toolbar import debug_toolbar_urls
 
+from tko.views import ContactView, ArticleListView, EventListView
 
 urlpatterns = [
     path('admin/', admin.site.urls),
+    path('create-contact/', ContactView.as_view(), name='create-contact'),
+    path('load-articles/', ArticleListView.as_view(), name='load-articles'),
+    path('load-events/', EventListView.as_view(), name='load-events'),
 ] + debug_toolbar_urls()
diff --git a/services/backend/tko/admin.py b/services/backend/tko/admin.py
index 0dd069e..e2f1465 100644
--- a/services/backend/tko/admin.py
+++ b/services/backend/tko/admin.py
@@ -1,19 +1,29 @@
 from django.contrib import admin
 
-# Register your models here.
 from . import models
 
 
 @admin.register(models.Contact)
 class ContactAdmin(admin.ModelAdmin):
-    fields = "__all__"
+    list_display = ['name', 'email', 'phone_number', 'content']
+
+    def has_add_permission(self, request, obj=None):
+        return False
+
+
+    def has_delete_permission(self, request, obj=None):
+        return False
+
+
+    def has_change_permission(self, request, obj=None):
+        return False
 
 
 @admin.register(models.Article)
 class ArticleAdmin(admin.ModelAdmin):
-    fields = "__all__"
+    list_display = ['title', 'date', 'author']
 
 
 @admin.register(models.Event)
 class EventAdmin(admin.ModelAdmin):
-    fields = "__all__"
+    list_display = ['title', 'start_date', 'end_date', 'color']
diff --git a/services/backend/tko/migrations/0001_initial.py b/services/backend/tko/migrations/0001_initial.py
new file mode 100644
index 0000000..5b6cba6
--- /dev/null
+++ b/services/backend/tko/migrations/0001_initial.py
@@ -0,0 +1,46 @@
+# Generated by Django 5.1.5 on 2025-02-19 16:16
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Article',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(max_length=100)),
+                ('content', models.TextField()),
+                ('date', models.DateField()),
+                ('author', models.CharField(max_length=100)),
+                ('active_to', models.DateField(blank=True, null=True)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Contact',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('first_name', models.CharField(max_length=100)),
+                ('last_name', models.CharField(max_length=100)),
+                ('email', models.EmailField(max_length=254)),
+                ('phone_number', models.CharField(max_length=16)),
+                ('content', models.TextField()),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Event',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(max_length=100)),
+                ('start_date', models.DateTimeField()),
+                ('end_date', models.DateTimeField()),
+                ('color', models.CharField(max_length=100)),
+            ],
+        ),
+    ]
diff --git a/services/backend/tko/migrations/0002_article_image.py b/services/backend/tko/migrations/0002_article_image.py
new file mode 100644
index 0000000..b83ce6d
--- /dev/null
+++ b/services/backend/tko/migrations/0002_article_image.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.1.5 on 2025-02-19 16:30
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('tko', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='article',
+            name='image',
+            field=models.FileField(null=True, upload_to='articles/%Y/%m/%d'),
+        ),
+    ]
diff --git a/services/backend/tko/migrations/0003_rename_first_name_contact_name_and_more.py b/services/backend/tko/migrations/0003_rename_first_name_contact_name_and_more.py
new file mode 100644
index 0000000..32752e6
--- /dev/null
+++ b/services/backend/tko/migrations/0003_rename_first_name_contact_name_and_more.py
@@ -0,0 +1,22 @@
+# Generated by Django 5.1.5 on 2025-02-19 18:33
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('tko', '0002_article_image'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='contact',
+            old_name='first_name',
+            new_name='name',
+        ),
+        migrations.RemoveField(
+            model_name='contact',
+            name='last_name',
+        ),
+    ]
diff --git a/services/backend/tko/models.py b/services/backend/tko/models.py
index 1428951..95ea5fa 100644
--- a/services/backend/tko/models.py
+++ b/services/backend/tko/models.py
@@ -2,25 +2,33 @@ from django.db import models
 
 # Create your models here.
 class Contact(models.Model):
-    first_name = models.CharField(max_length=100)
-    last_name = models.CharField(max_length=100)
+    name = models.CharField(max_length=100)
     email = models.EmailField()
     phone_number = models.CharField(max_length=16)
     content = models.TextField()
 
+    def __str__(self):
+        return f"{self.name}, {self.email}, {self.phone_number}"
+
 
 class Article(models.Model):
     title = models.CharField(max_length=100)
     content = models.TextField()
-    # image = models.ImageField(upload_to='articles/%Y/%m/%d')
+    image = models.FileField(upload_to='articles/%Y/%m/%d', null=True)
     date = models.DateField()
     author = models.CharField(max_length=100)
 
     active_to = models.DateField(null=True, blank=True)  # do not show some invitation after this date
 
+    def __str__(self):
+        return self.title
+
 
 class Event(models.Model):
     title = models.CharField(max_length=100)
     start_date = models.DateTimeField()
     end_date = models.DateTimeField()
     color = models.CharField(max_length=100)
+
+    def __str__(self):
+        return self.title
diff --git a/services/backend/tko/serializers.py b/services/backend/tko/serializers.py
new file mode 100644
index 0000000..9fbb671
--- /dev/null
+++ b/services/backend/tko/serializers.py
@@ -0,0 +1,21 @@
+from rest_framework import serializers
+
+from tko.models import Contact, Article, Event
+
+
+class ContactSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Contact
+        fields = '__all__'
+
+
+class ArticleListSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Article
+        fields = '__all__'
+
+
+class EventListSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Event
+        fields = '__all__'
\ No newline at end of file
diff --git a/services/backend/tko/views.py b/services/backend/tko/views.py
index 91ea44a..c98a7ec 100644
--- a/services/backend/tko/views.py
+++ b/services/backend/tko/views.py
@@ -1,3 +1,22 @@
-from django.shortcuts import render
+from rest_framework.generics import ListAPIView, CreateAPIView
+from rest_framework import permissions
 
-# Create your views here.
+from tko.models import Article, Event
+from tko.serializers import ArticleListSerializer, EventListSerializer, ContactSerializer
+
+
+class ContactView(CreateAPIView):
+    serializer_class = ContactSerializer
+    permission_classes = [permissions.AllowAny]
+
+
+class ArticleListView(ListAPIView):
+    queryset = Article.objects.all()
+    serializer_class = ArticleListSerializer
+    permission_classes = [permissions.AllowAny]
+
+
+class EventListView(ListAPIView):
+    queryset = Event.objects.all()
+    serializer_class = EventListSerializer
+    permission_classes = [permissions.AllowAny]
diff --git a/services/frontend/components/Calendar.vue b/services/frontend/components/Calendar.vue
index 1ce66c1..107267f 100644
--- a/services/frontend/components/Calendar.vue
+++ b/services/frontend/components/Calendar.vue
@@ -17,6 +17,10 @@
 
 <script setup lang="ts">
 import './assets/css/main.css'
+import {useAPI} from "~/composables/useAPI";
+
+
+const { error, data } = await useAPI('load-events/', {method: "GET"});
 
 const value = [new Date()];
 const events = [
diff --git a/services/frontend/components/ContactUs.vue b/services/frontend/components/ContactUs.vue
index e08ebbf..f2f6119 100644
--- a/services/frontend/components/ContactUs.vue
+++ b/services/frontend/components/ContactUs.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card class="contact">
-    <v-form v-model="valid" @submit="sendContact">
+    <v-form v-model="valid">
       <v-container>
         <v-card-title class="contact__title">Kontaktujte nás!</v-card-title>
         <v-row>
@@ -51,6 +51,7 @@
             <v-btn
               class="contact__button"
               type="submit"
+              @click.prevent="sendContact"
             >
               Poslat
             </v-btn>
@@ -62,6 +63,7 @@
 </template>
 <script setup lang="ts">
 import './assets/css/main.css'
+import {useAPI} from "~/composables/useAPI";
 
 const valid = ref<boolean>(false);
 
@@ -71,7 +73,15 @@ const phone = ref<string>("");
 const textField = ref<string>("");
 
 function sendContact() {
-  console.log("KONTAKT NEZASLAN");
+  useAPI('create-contact/', {
+    method: "POST",
+    body: {
+      name: fullName.value,
+      email: email.value,
+      phone_number: phone.value,
+      content: textField.value,
+    }
+  });
 }
 
 </script>
\ No newline at end of file
diff --git a/services/frontend/components/News.vue b/services/frontend/components/News.vue
index 06fb0b5..3390728 100644
--- a/services/frontend/components/News.vue
+++ b/services/frontend/components/News.vue
@@ -44,6 +44,11 @@
 <script setup lang="ts">
 import './assets/css/main.css'
 
+import {useAPI} from "~/composables/useAPI";
+
+const { error, data } = await useAPI('load-articles/', {method: "GET"});
+console.log(error.value);
+
 const articles = [
   {
     autor: "Bebloid Obecný",
diff --git a/services/frontend/components/menu/Header.vue b/services/frontend/components/menu/Header.vue
index 16743da..fb2036b 100644
--- a/services/frontend/components/menu/Header.vue
+++ b/services/frontend/components/menu/Header.vue
@@ -1,4 +1,5 @@
 <template>
+  <ClientOnly>
     <v-layout>
       <v-app-bar style="position: fixed">
         <v-app-bar-nav-icon
@@ -49,8 +50,8 @@
           </v-list-item>
         </v-list>
       </v-navigation-drawer>
-
     </v-layout>
+  </ClientOnly>
 </template>
 
 <script setup lang="ts">
diff --git a/services/frontend/composables/useAPI.ts b/services/frontend/composables/useAPI.ts
new file mode 100644
index 0000000..4ab5adc
--- /dev/null
+++ b/services/frontend/composables/useAPI.ts
@@ -0,0 +1,19 @@
+import type { UseFetchOptions } from "nuxt/app";
+
+export function useAPI<T>(
+    endpoint: string,
+    options?: UseFetchOptions<T>,
+) {
+    if (!endpoint.startsWith("/")) {
+        endpoint = `/${endpoint}`
+    }
+
+    const cfg = useRuntimeConfig()
+
+    const fullUrl = `${cfg.public.backendUrl}${endpoint}`
+
+    return useFetch(
+        fullUrl,
+        {...options}
+    )
+}
diff --git a/services/frontend/nuxt.config.ts b/services/frontend/nuxt.config.ts
index 9ea4264..8b07a79 100644
--- a/services/frontend/nuxt.config.ts
+++ b/services/frontend/nuxt.config.ts
@@ -3,11 +3,17 @@ import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 
 export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
+  ssr: false,
   devtools: { enabled: true },
   typescript: { typeCheck: true},
   build: {
     transpile: ['vuetify'],
   },
+  runtimeConfig: {
+    public: {
+      backendUrl: process.env.BACKEND_URL ?? "http://localhost:8000"
+    },
+  },
   modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
diff --git a/services/frontend/pages/index.vue b/services/frontend/pages/index.vue
index 5340439..89b7b6b 100644
--- a/services/frontend/pages/index.vue
+++ b/services/frontend/pages/index.vue
@@ -19,5 +19,7 @@
   <courses/>
   <contact-us/>
 </template>
+
 <script setup lang="ts">
+
 </script>
\ No newline at end of file
diff --git a/services/frontend/plugins/vuetify.ts b/services/frontend/plugins/vuetify.ts
index 9247560..09a8019 100644
--- a/services/frontend/plugins/vuetify.ts
+++ b/services/frontend/plugins/vuetify.ts
@@ -66,6 +66,5 @@ export default defineNuxtPlugin((app) => {
     }
   })
 
-
   app.vueApp.use(vuetify)
 })