diff --git a/.gitignore b/.gitignore
index 19bda59989c8b459285f2b3128f93f5c298d357e..31c8d8c2c785510e7706462a57ae10f707cb620f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ shared/static/shared/*.css
 webpack-stats.json
 package-lock.json
 .venv
+media/*
diff --git a/contracts/models.py b/contracts/models.py
index 375b08d1a146cfdd2e7b0dca85424e5a89a95ba4..aa8b93c5d8db83f6ba1ac0a8e93a9b6594f21bd9 100644
--- a/contracts/models.py
+++ b/contracts/models.py
@@ -519,7 +519,7 @@ class ContracteeSignature(models.Model):
         result = self.contractee.name
 
         if len(representatives) != 0:
-            result += f"zastoupena {representatives}"
+            result += f" - zastoupena {representatives}"
 
         result += f", {self.date}"
 
@@ -559,7 +559,7 @@ class SigneeSignature(models.Model):
         result = self.signee.name
 
         if len(representatives) != 0:
-            result += f"zastoupena {representatives}"
+            result += f" - zastoupena {representatives}"
 
         result += f", {self.date}"
 
diff --git a/contracts/templates/contracts/index.html b/contracts/templates/contracts/index.html
index 982d4e43c135e1fc61f2a2bd8192d436d5c312d5..f25553a1da4e1f39bd86b751401a68d8f2fb7552 100644
--- a/contracts/templates/contracts/index.html
+++ b/contracts/templates/contracts/index.html
@@ -1,31 +1,138 @@
 {% extends "shared/includes/base.html" %}
+{% load subtract %}
 
 {% block content %}
     <h1 class="head-alt-lg mb-10">{{ title }}</h1>
-    <table class="table table--striped table--bordered">
+    <table class="table table-auto w-full table--striped table--bordered">
         <thead>
             <tr>
-                <td>Identifikátor</td>
+                <td class="font-bold">Identifikace</td>
                 <td>Typ</td>
                 <td>Právní stav</td>
                 <td>Účinná od</td>
                 <td>Platná do</td>
-                <td>Naše smluvní strana</td>
-                <td>Ostatní smluvní strany</td>
+                <td>Naše podpisy</td>
+                <td>Cizí podpisy</td>
             </tr>
         </thead>
         <tbody>
             {% for contract in page %}
                 <tr>
-                    <td>{{ contract.identifier }}</td>
+                    <td>
+                        <a
+                            class="underline"
+                            href="#"
+                        >{{ contract.identifier }}</a>
+                    </td>
                     <td>{{ contract.get_type_display }}</td>
                     <td>{{ contract.get_legal_state_display }}</td>
                     <td>{{ contract.valid_start_date }}</td>
                     <td>{{ contract.valid_end_date }}</td>
-                    <td></td>
-                    <td></td>
+                    <td>
+                        <ul class="flex flex-col gap-1">
+                            {% for signature in contract.contractee_signatures.all %}
+                                <li
+                                    class="p-2 rounded-sm cursor-pointer text-center {% if not signature.signee.color %}bg-gray-200 duration-100 hover:bg-gray-300{% endif %}"
+                                    {% if signature.signee.color %}style="background-color:{{ signature.signee.color }}"{% endif %}
+                                >{{ signature.contractee.name }}</li>
+                            {% endfor %}
+                        </ul>
+                    </td>
+                    <td>
+                        <ul class="flex flex-col gap-1">
+                            {% for signature in contract.signee_signatures.all %}
+                                <li
+                                    class="p-2 rounded-sm cursor-pointer text-center {% if not signature.signee.color %}bg-gray-200 duration-100 hover:bg-gray-300{% endif %}"
+                                    {% if signature.signee.color %}style="background-color:{{ signature.signee.color }}"{% endif %}
+                                >{{ signature.signee.name }}</li>
+                            {% endfor %}
+                        </ul>
+                    </td>
                 </tr>
             {% endfor %}
         </tbody>
     </table>
+    
+    {% if page.has_other_pages %}
+        <div class="pagination-container">
+            <nav class="pagination space-x-1">
+                <a
+                    class="btn btn--icon btn--grey-125 btn--hoveractive btn--to-black btn--condensed btn--inverted-icon"
+                    {% if not page.has_previous %}disabled{% endif %}
+                    {% if page.has_previous %}href="{% url "contracts:index" %}?page={{ page.previous_page_number }}"{% endif %}
+                >
+                    <div class="btn__body-wrap">
+                        <div class="btn__body">Předchozí</div>
+                        <div class="btn__icon">
+                            <i class="ico--chevron-left"></i>
+                        </div>
+                    </div>
+                </a>
+                
+                {% if page.previous_page_number != 1 %}
+                    <a
+                        class="btn btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block"
+                        href="{% url "contracts:index" %}?page=1"
+                    >
+                        <div class="btn__body">1</div>
+                    </a>
+                {% endif %}
+                
+                {% if page.has_previous and page.previous_page_number != 2 %}
+                    <span class="text-grey-500 hidden md:flex flex-col px-2 justify-center">...</span>
+                {% endif %}
+                
+                {% if page.has_previous %}
+                    <a
+                        class="btn btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block"
+                        href="{% url "contracts:index" %}?page={{ page.previous_page_number }}"
+                    >
+                        <div class="btn__body ">{{ page.previous_page_number }}</div>
+                    </a>
+                {% endif %}
+
+                <button class="btn btn--grey-500 btn--condensed hidden md:inline-block">
+                    <div class="btn__body">{{ page.number }}</div>
+                </button>
+                
+                {% if page.has_next %}
+                    <a
+                        class="btn btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block"
+                        href="{% url "contracts:index" %}?page={{ page.next_page_number }}"
+                    >
+                        <div class="btn__body ">{{ page.next_page_number }}</div>
+                    </a>
+                {% endif %}
+                
+                {% if paginator.num_pages != page.next_page_number and paginator.num_pages|subtract:1 != page.next_page_number %}
+                    <span class="text-grey-500 hidden md:flex flex-col px-2 justify-center">...</span>
+                {% endif %}
+                
+                {% comment %}num_pages is equivalent to the last page number{% endcomment %}
+                
+                {% if paginator.num_pages != page.next_page_number %}
+                    <a
+                        role="button"
+                        class="btn btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block"
+                        href="{% url "contracts:index" %}?page={{ paginator.num_pages }}"
+                    >
+                        <div class="btn__body">{{ paginator.num_pages }}</div>
+                    </a>
+                {% endif %}
+                
+                <a
+                    class="btn btn--icon btn--grey-125 btn--hoveractive btn--to-black btn--condensed"
+                    {% if not page.has_next %}disabled{% endif %}
+                    {% if page.has_next %}href="{% url "contracts:index" %}?page={{ page.next_page_number }}"{% endif %}
+                >
+                    <div class="btn__body-wrap">
+                        <div class="btn__body">Další</div>
+                        <div class="btn__icon">
+                            <i class="ico--chevron-right"></i>
+                        </div>
+                    </div>
+                </a>
+            </nav>
+        </div>
+    {% endif %}
 {% endblock %}
diff --git a/contracts/templatetags/__init__.py b/contracts/templatetags/__init__.py
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/contracts/templatetags/subtract.py b/contracts/templatetags/subtract.py
new file mode 100644
index 0000000000000000000000000000000000000000..076ef2c53ab9264f0a8b7f421ff0b813c733a11c
--- /dev/null
+++ b/contracts/templatetags/subtract.py
@@ -0,0 +1,7 @@
+from django import template
+
+register = template.Library()
+
+@register.filter(name='subtract')
+def subtract(value, arg):
+    return value - arg 
diff --git a/contracts/views.py b/contracts/views.py
index 369c042be6ee7d7d2f121fb71afb67e4659337b3..226b333efc34aa1396eb882f74dc521f7aa72e38 100644
--- a/contracts/views.py
+++ b/contracts/views.py
@@ -8,7 +8,7 @@ from .models import Contract
 
 
 def index(request):
-    contracts = Contract.objects.all()
+    contracts = Contract.objects.order_by("valid_start_date").all()
     paginator = Paginator(contracts, 25)
     
     page = paginator.get_page(
@@ -23,6 +23,7 @@ def index(request):
             "user": request.user,
             "title": "Seznam smluv",
             "description": "Description",
+            "paginator": paginator,
             "page": page,
         }
     )
diff --git a/shared/templates/shared/includes/base.html b/shared/templates/shared/includes/base.html
index 93d15aa7539e9da2685d2e46cf6bb67210058cf4..f90d107f2529db490ea12c0873f79b6a523c687b 100644
--- a/shared/templates/shared/includes/base.html
+++ b/shared/templates/shared/includes/base.html
@@ -29,6 +29,12 @@
             href="{% static "shared/favicon.png" %}"
         >
         
+        <link
+            href="{% static "shared/style.css" %}"
+            rel="stylesheet"
+            media="all"
+        >
+        
         <link
             href="https://styleguide.pirati.cz/2.11.x/css/styles.css"
             rel="stylesheet"