diff --git a/vagus/media/uploads/user/id-1/79/G701C2-BIEN-CHOISIR-SON-INTEGRAL.jpg b/vagus/media/uploads/user/id-1/79/G701C2-BIEN-CHOISIR-SON-INTEGRAL.jpg
new file mode 100644
index 0000000..026f14a
Binary files /dev/null and b/vagus/media/uploads/user/id-1/79/G701C2-BIEN-CHOISIR-SON-INTEGRAL.jpg differ
diff --git a/vagus/media/uploads/user/id-1/79/podroz_kamperem_wroclawskie_kampery_zbierajse-15.jpg b/vagus/media/uploads/user/id-1/79/podroz_kamperem_wroclawskie_kampery_zbierajse-15.jpg
new file mode 100644
index 0000000..6d87d31
Binary files /dev/null and b/vagus/media/uploads/user/id-1/79/podroz_kamperem_wroclawskie_kampery_zbierajse-15.jpg differ
diff --git a/vagus/media/uploads/user/id-1/80/podroz_kamperem_wroclawskie_kampery_zbierajse-15.jpg b/vagus/media/uploads/user/id-1/80/podroz_kamperem_wroclawskie_kampery_zbierajse-15.jpg
new file mode 100644
index 0000000..6d87d31
Binary files /dev/null and b/vagus/media/uploads/user/id-1/80/podroz_kamperem_wroclawskie_kampery_zbierajse-15.jpg differ
diff --git a/vagus/static/css/style.css b/vagus/static/css/style.css
index a0cddcf..186ea05 100644
--- a/vagus/static/css/style.css
+++ b/vagus/static/css/style.css
@@ -1,14 +1,145 @@
-h1 {
-    color:yellow;
-    font-size: 50px;
-}
-a {
-    color: rgb(88, 8, 8);
+body {
+    margin: 0 auto;
+    color: black;
+    font-family: 'Poppins';
 }
 
-a:hover {
-    color:yellow
+.container {
+    width: 1380px;
+    max-width: 100%;
+    margin: 0 auto;
 }
-a:active {
-    color:yellow
+
+/* HEADER SMART BANER */
+
+.header-smart-baner {
+    width: 100%;
+    height: 40px;
+    background-color: rgb(248,244,244);
+}
+.header-smart-baner-text {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    text-decoration: underline;
+    text-align: center;
+    color: black;
+    font-weight: 400;
+    font-size: 13px;
+}
+
+/* END SMART BANER */
+/* --------------- */
+.header {
+    overflow: hidden;
+    color: black;
+
+}
+.header-inner {
+    display: flex;
+	align-items: center;
+	justify-content: space-between;
+    flex-wrap: wrap;    
+    height: 80px;
+    max-height: 100%;
+}
+
+/* HEADER LOGO */
+.header-logo{
+    padding-bottom: 12px;
+    padding-left: 15px;
+    max-width: 85px;
+}
+.header-logo a {
+    color: black;
+    font-family: 'Dosis';
+    font-size: 32px;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+/* HEADER NAV */
+
+.header-nav {
+    display: inline-block;
+    padding-right: 15px;
+    max-width: 90%;
+}
+.header-nav a {
+    color: black;
+    font-family: 'Poppins';
+    font-size: 14px;
+    text-decoration: none;
+    font-weight: 500;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.header-nav a:active {
+    opacity: 85%;
+}
+.header-nav a:hover {
+    opacity: 85%;
+}
+
+.header-nav-bar {
+    display: inline-block;
+    max-height: 85px;
+    max-width: 300px;
+    min-width: 50px;
+}
+
+
+.header-nav-bar-container {
+    display: flex;
+    margin: 0;
+}
+/* ------------------------ */
+
+/* ------------------------ */
+
+.header-nav-bar-text {
+    margin: auto;
+    text-align: center;
+    font-weight: 600;
+}
+.header-nav-bar-avatar {
+    min-width: 36px;
+    max-height: 36px;
+    padding-left: 10px;
+}
+
+.header-nav-bar img {
+    width: 36px;
+    border-radius: 50%;
+}
+
+
+@media(min-width:840px){
+
+.header-nav-bar {
+    padding-left: 20px;
+    padding-right: 15px;
+    font-size: 16px;
+}
+}
+
+@media(max-width: 840px) {
+.header-smart-baner{
+    display: none;
+}
+
+.header-nav a {
+    display: none;
+}
+.header-logo a {
+    float: none;
+    display: block;
+    text-align: left;
+}
+}
+
+
+.main-content {
+    padding-left: 20px;
+    padding-right: 20px;
 }
\ No newline at end of file
diff --git a/vagus/template/.DS_Store b/vagus/template/.DS_Store
new file mode 100644
index 0000000..9c3cdcc
Binary files /dev/null and b/vagus/template/.DS_Store differ
diff --git a/vagus/template/<li class='heder-nav-account'>.html b/vagus/template/<li class='heder-nav-account'>.html
new file mode 100644
index 0000000..4793d35
--- /dev/null
+++ b/vagus/template/<li class='heder-nav-account'>.html	
@@ -0,0 +1,13 @@
+<li class='heder-nav-account'> 
+                            <span>
+                            {% if user.is_authenticated %}
+                                {% if user.status = 'Regular_Account' %}
+                                
+                                {% elif user.status == 'Company_Account' or user.status == 'Need_verification' %}
+                                
+                                {% endif %}
+
+                            {% endif %}
+                            </span>
+                            <span></span>
+                            </li>
\ No newline at end of file
diff --git a/vagus/template/base.html b/vagus/template/base.html
deleted file mode 100644
index e27b652..0000000
--- a/vagus/template/base.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% load static %}
-
-<!doctype html>
-<html>
-     <head>
-    <link rel="stylesheet" href="{% static 'css/style.css' %}">
-     </head>
-     <body>
-     
-   
-     </body>
-</html>
\ No newline at end of file
diff --git a/vagus/template/header.html b/vagus/template/header.html
new file mode 100644
index 0000000..cc595bc
--- /dev/null
+++ b/vagus/template/header.html
@@ -0,0 +1,42 @@
+
+<!doctype html>
+<html>
+     <head>
+    <link rel="stylesheet" href="{% static 'css/style.css' %}">
+    <link rel="stylesheet" href = 'style.css'>
+    <link href = "https://fonts.googleapis.com/css?family=Dosis" rel='stylesheet'>
+    <link href = "https://fonts.googleapis.com/css?family=Poppins" rel='stylesheet'>
+     </head>
+     <body>
+     <div class='header-smart-baner'>               <!-- TOP HEADER SMART BANER-->
+        <div class='header-smart-baner-text'> Lubisz ciasteczka? Mamy ich naprawdę duzo.</div>
+     </div>                                         <!-- TOP HEADER SMART BANER END-->
+      <div class='header'>
+         <div class='container'>
+            <div class='header-inner'>
+               <div class='header-logo'> <a href='#'> vagus </a> </div>
+               <div class='header-nav'> 
+                  <a href='#'>KAMPERY </a>
+                  <a href='#'>O NAS </a>
+                  <a href='#'>FAQ</a>
+                  <a href='#'>KONTAKT </a>
+                  <div class='header-nav-bar'>
+                     <div class='header-nav-bar-container'>
+                        <div class='header-nav-bar-menu-mobile'> 
+                           <div class='header-nav-bar-menu-mobile-icon'></div>  
+                           <div class='header-nav-bar-menu-mobile-icon'></div>
+                           <div class='header-nav-bar-menu-mobile-icon'></div>
+                        </div>
+                        <div class='header-nav-bar-text'> Witaj, Krzysztof</div>
+                        <div class='header-nav-bar-avatar'> <img src='photo.jpg'> </div>
+                     </div>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+     </body>
+</html>
+
+
+                
\ No newline at end of file
diff --git a/vagus/template/index.html b/vagus/template/index.html
index b59c169..7274f47 100644
--- a/vagus/template/index.html
+++ b/vagus/template/index.html
@@ -4,17 +4,62 @@
 <html>
      <head>
     <link rel="stylesheet" href="{% static 'css/style.css' %}">
+    <link href = "https://fonts.googleapis.com/css?family=Dosis" rel='stylesheet'>
+    <link href = "https://fonts.googleapis.com/css?family=Poppins" rel='stylesheet'>
+    
      </head>
      <body>
-     {% if messages %}
-<ul class="messages">
-    {% for message in messages %}
-    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
-    {% endfor %}
-</ul>
-{% endif %}
-     {% block content %}
+     <div class='header-smart-baner'>               <!-- TOP HEADER SMART BANER-->
+        <div class='header-smart-baner-text'> Lubisz ciasteczka? Mamy ich naprawdę duzo.</div>
+     </div>                                         <!-- TOP HEADER SMART BANER END-->
+      <div class='header'>
+         <div class='container'>
+            <div class='header-inner'>
+               <div class='header-logo'> <a href='{{ request.scheme }}://{{ request.META.HTTP_HOST }}/'> vagus </a> </div>
+               <div class='header-nav'> 
+                  <a href='{{ request.scheme }}://{{ request.META.HTTP_HOST }}/offers'>KAMPERY </a>
+                  <a href='#'>O NAS </a>
+                  <a href='#'>FAQ</a>
+                  <a href='#'>KONTAKT </a>
+                  <a href='{{ request.scheme }}://{{ request.META.HTTP_HOST }}/add-offer'>DODAJ OFERTĘ </a>           
+                  <div class='header-nav-bar'>
+                     <div class='header-nav-bar-container'>
+                        <div class='header-nav-bar-text'>
+                          
+                         {% if user.is_authenticated %}
+                              {% if user.status != 'Moderator'  %}
+                                  Witaj, {{ user.first_name }} 
+                              {% else %}
+                                   Witaj, Adminie
+                              {% endif %}   
+                         {% else %}
+                              Witaj, nieznajomy
+                         {% endif %}
+                         </div>
+                        <div class='header-nav-bar-avatar'> <img src='photo.jpg'> </div>
+                     </div>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+       
+      <div class='container'>
+      {% if messages %}
+          <ul class="messages">
+          {% for message in messages %}
+          <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
+          {% endfor %}
+          </ul>
+          {% endif %}
+         <div class='main-content'>
+         {% block content %}
 
-     {% endblock %}
+         {% endblock %}
+         </div>
+      </div>
      </body>
-</html>
\ No newline at end of file
+</html>
+
+
+                
\ No newline at end of file
diff --git a/vagus/template/offer/add-offer.html b/vagus/template/offer/add-offer.html
new file mode 100644
index 0000000..72688fd
--- /dev/null
+++ b/vagus/template/offer/add-offer.html
@@ -0,0 +1,19 @@
+{% extends 'index.html' %}
+ {% load static %}
+
+
+ {% block content %}
+
+<form action=""" method="post" enctype="multipart/form-data">
+    {% csrf_token %}
+    {{ form.as_p}}
+{{ formset.management_form }}
+{% for photo in formset %}
+    <label>{{photo.image}} {{photo.main_image}} </label>
+{% endfor %}
+    <button style="background-color:black; color:white" class="btn btn-outline-info" type="submit">Create Offer </button>
+
+</form>
+ 
+ {% endblock content %}
+
diff --git a/vagus/template/offer/offer-detail.html b/vagus/template/offer/offer-detail.html
index 65c42a3..c51da42 100644
--- a/vagus/template/offer/offer-detail.html
+++ b/vagus/template/offer/offer-detail.html
@@ -3,7 +3,26 @@
  {% block content %}
 
   <h1> {{ object.title }} </h1>
-  {{ Offer.price }}
-
+  {{object.user}}
+  <p> {{ object.price }} PLN / dzień</p>
+<ul>
+	<li>    'DMC' <b> {{object.DMC}} </b> </li>
+	<li>    'Places_to_sleep' <b> {{object.Places_to_sleep}} </b></li>
+	<li>    'cooker'  <b> {{object.cooker}} </b></li>
+	<li>    'fridge' <b> {{object.fridge}} </b></li>
+	<li>    'microwave' <b> {{object.microwave}} </b></li>
+	<li>    'Webasto' <b> {{object.Webasto}} </b></li>
+	<li>    'auto_temp_control' <b> {{object.auto_temp_control}} </b></li>
+	<li>    'water_level_indicator' <b> {{object.water_level_indicator}} </b> </li>
+	<li>    'battery_level'<b> {{object.battery_level}} </b> </li>
+	<li>    'photovoltaic_panels' <b> {{object.photovoltaic_panels}} </b> </li>
+	<li>    'gearbox <b> {{object.gearbox}} </b> </li>
+	<li>    'tempomat' <b> {{object.tempomat}} </b> </li>
+</ul>
  
+{{object.created_by.id}} 
+{{object.id}}
+
+
+
  {% endblock content %}
\ No newline at end of file
diff --git a/vagus/template/offer/offer.html b/vagus/template/offer/offer.html
deleted file mode 100644
index ab2e2db..0000000
--- a/vagus/template/offer/offer.html
+++ /dev/null
@@ -1,13 +0,0 @@
- {% extends 'index.html' %}
- {% load static %}
-
-
- {% block content %}
-
-<form action=""" method="post">
-    {% csrf_token %}
-    {{ form.as_p }}
-            <button style="background-color:#F4EB16; color:blue" class="btn btn-outline-info" type="submit">Create Offer </button>
-</form>
- 
- {% endblock content %}
\ No newline at end of file
diff --git a/vagus/template/offer/offers.html b/vagus/template/offer/offers.html
index f4d0d72..43e9369 100644
--- a/vagus/template/offer/offers.html
+++ b/vagus/template/offer/offers.html
@@ -5,11 +5,13 @@
 {% block content %}
 {% if offer_list %}
     {% for Offer in offer_list %}
-    <ul>
-        <li> <a href ="{{ Offer.get_absolute_url}}"> <h1> {{ Offer.title}} </h1>
-        {{ Offer.category }} {{ Offer.price }} {{ Offer.created_by }} </li>
 
-    </ul>
+        <ul>
+            <li> <a href ="{{ Offer.get_absolute_url}}"> <h1> {{ Offer.title}} </h1> </a>
+            {{ Offer.category }} {{ Offer.price }} {{ Offer.created_by }} </li>
+
+        </ul>
+
 
     {% endfor %}
 {% endif %}