diff --git a/assets/documentation.js b/assets/documentation.js
index 0c2658b..255d6fb 100644
--- a/assets/documentation.js
+++ b/assets/documentation.js
@@ -11,17 +11,15 @@ window.addEventListener('load', () => {
     }
 
     function generateQuery(query) {
-        initialQuery = `curl -H "accept: ${query['contentType']}" "https://holiday.bbr-dev.info/api/v1/holidays?country=${query['country']}`
+        initialQuery = `https://holiday.bbr-dev.info/api/v1/holidays?country=${query['country']}`
 
-        delete query['contentType'];
         delete query['country'];
 
         for(const key in query) {
             initialQuery += `&${key}=${query[key]}`
         }
-        initialQuery+='"';
-
-        document.querySelector('#result-content').innerHTML = initialQuery;
+        document.querySelector('#query-link').href = initialQuery;
+        document.querySelector('#result-content').innerHTML = "curl \"" + initialQuery + "\"";
     }
 
     let country = document.querySelector("#country");
@@ -36,10 +34,8 @@ window.addEventListener('load', () => {
     let dDate = document.querySelector("#dsd-date");
 
     let dStartRange = document.querySelector("#dsr-start-range");
-    let dStartRangeRequired = document.querySelector("#dsr-start-range-required");
 
     let dEndRange = document.querySelector("#dsr-end-range");
-    let dEndRangeRequired = document.querySelector("#dsr-end-range-required");
 
     let queryGenerator = document.querySelector("#query-generator");
 
@@ -53,6 +49,7 @@ window.addEventListener('load', () => {
         if(religiousHoliday.value === 'true' || religiousHoliday.value === 'false') {
             query['religiousHoliday'] = parseBoolean(religiousHoliday.value);
         }
+        console.log(dateSelector.value,  dStartRange.value,  dEndRange.value);
         switch(dateSelector.value) {
             case 'year':
                 query['year'] = dYear.value;
@@ -63,10 +60,10 @@ window.addEventListener('load', () => {
                 }
                 break;
             case 'range':
-                if(dStartRangeRequired.checked && dStartRange.value) {
+                if(dStartRange.value) {
                     query['startRange'] = dStartRange.value;
                 }
-                if(dEndRangeRequired.checked && dEndRange.value) {
+                if(dEndRange.value) {
                     query['endRange'] = dEndRange.value;
                 }
             case 'all':
@@ -79,13 +76,14 @@ window.addEventListener('load', () => {
     queryGenerator.addEventListener('change', event => {
         const query = {};
         query['country'] = country.value;
-        query['contentType'] = contentType.value;
+        query['type'] = contentType.value;
         if(stateHoliday.value === 'true' || stateHoliday.value === 'false') {
             query['stateHoliday'] = parseBoolean(stateHoliday.value);
         }
         if(religiousHoliday.value === 'true' || religiousHoliday.value === 'false') {
             query['religiousHoliday'] = parseBoolean(religiousHoliday.value);
         }
+        console.log(dateSelector.value,  dStartRange.value,  dEndRange.value);
         switch(dateSelector.value) {
             case 'year':
                 query['year'] = dYear.value;
@@ -96,10 +94,10 @@ window.addEventListener('load', () => {
                 }
                 break;
             case 'range':
-                if(dStartRangeRequired.checked && dStartRange.value) {
+                if(dStartRange.value) {
                     query['startRange'] = dStartRange.value;
                 }
-                if(dEndRangeRequired.checked && dEndRange.value) {
+                if(dEndRange.value) {
                     query['endRange'] = dEndRange.value;
                 }
             case 'all':
diff --git a/assets/global.css b/assets/global.css
index 778b1e4..88933be 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -2,7 +2,6 @@ body {
     border: 0;
     margin: 0;
     padding: 0;
-    font-size: 20px;
 }
 
 main {
@@ -12,20 +11,44 @@ main {
     position: relative;
 }
 
+header {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 1em;
+    background: white;
+    position: sticky;
+    z-index: 10;
+    top: 0;
+    border-bottom: 1px solid #dddddd;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 1em;
+}
+
 .dialog {
     box-sizing: border-box;
     border: 1px solid #e0e0e0;
     background: white;
     margin: auto;
-    padding: 16px 32px;
+    padding: 1em 0.5em;
 }
 
+
+@media screen and (min-width: 480px) {
+    .dialog {
+        padding: 1em 2em;
+    }
+}
+
+
 .background-image {
     min-width: 100vw;
-    min-height: 100vh;
+    min-height: 100dvh;
 
     max-width: 100vw;
-    max-height: 100vh;
+    max-height: 100dvh;
 
     background: url("/assets/background.jpg");
     background-position: bottom;
@@ -63,50 +86,65 @@ main {
 }
 
 h1 {
-    font-size: 2rem;
+    font-size: 1.1rem;
+    margin: 0;
 }
 h1 a {
     all: unset;
 }
+h3 {
+    margin: 0.5em 0;
+}
 
+@media screen and (min-width: 480px) {
+    h1 {
+        font-size: 1.6rem;
+    }
+}
 
 .form-field {
     width: 100%;
-    margin-bottom: 16px;
+    margin-bottom: 1em;
 }
 .form-field label {
     display: block;
     color: #999;
 }
-.form-field input {
-    width: 300px;
+.form-field input, .form-field textarea {
+    width: 100%;
     border: none;
     border-bottom: 1px solid #bbb;
 
-    font-size: 20px;
+    font-size: 1rem;
     outline: none;
 }
 
-.form-field input:focus {
+.form-field .checkbox {
+    display: inline;
+}
+
+.form-field input[type=checkbox] {
+    width: inherit;
+    margin-left: 1em;
+    accent-color: #6a7579;
+}
+
+.form-field input:focus, .form-field textarea:focus {
     color: cadetblue;
     border-bottom: 1px solid cadetblue;
 }
 
-.form-field input:not(focus) {
+.form-field input:not(focus), .form-field textarea:not(focus) {
     color: #333;
 }
 
-.form-field label {
-    display: block;
-    color: #999;
-}
 .form-field select {
     all: unset;
     width: 100%;
     border: none;
     border-bottom: 1px solid #bbb;
 
-    font-size: 20px;
+    font-size: 1rem;
     outline: none;
 }
 
@@ -123,29 +161,28 @@ h1 a {
     color: cadetblue;
 }
 
-
-.button.secondary, button.primary {
-    padding: 12px 16px;
+.button.primary, button.primary {
+    padding: 0.75em 1em;
     background-color: cadetblue;
     font-family: Quicksand, Arial, sans-serif;
     border: none;
     color: white;
-    font-size: 1.2rem;
-    margin-top: 16px;
+    font-size: 1rem;
+    margin-top: 1em;
 }
 
-.button.secondary, button.primary:hover {
+.button.primary, button.primary:hover {
     filter: contrast(140%);
 }
 
 .button.secondary, button.secondary {
-    padding: 12px 16px;
+    padding: 0.75em 1em;
     background-color: white;
     font-family: Quicksand, Arial, sans-serif;
     border: 1px solid cadetblue;
     color: cadetblue;
-    font-size: 1.2rem;
-    margin-top: 16px;
+    font-size: 1rem;
+    margin-top: 1em;
 }
 
 .button.secondary:hover, button.secondary:hover {
@@ -155,11 +192,11 @@ h1 a {
 /*index.html*/
 
 .search-dialog {
-    position: absolute;
-    top: 0;
-    left: 0;
+    position: relative;
     width: 100%;
+    padding-top: 40px;
     padding-bottom: 40px;
+    border: none;
 }
 
 @media screen and (min-width: 480px) {
@@ -169,6 +206,7 @@ h1 a {
         left: 10vw;
         transform: translateY(-50%);
         width: 380px;
+        padding-top: 40px;
         padding-bottom: 40px;
     }
 }
@@ -179,6 +217,7 @@ h1 a {
     width: 100%;
     max-width: 100%;
     padding-bottom: 40px;
+    border: none;
 }
 
 .results-dialog table {
@@ -193,6 +232,7 @@ h1 a {
     .results-dialog {
         position: relative;
         margin: auto;
+        margin-top: 1em;
         width: 600px;
         padding-bottom: 40px;
     }
@@ -200,4 +240,155 @@ h1 a {
 
 .results td {
     padding: 0.4em 0;
+}
+
+
+/*documentation.html*/
+.documentation-dialog {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    border: none;
+}
+
+@media screen and (min-width: 480px) {
+    .documentation-dialog {
+        position: relative;
+        margin: auto;
+        margin-top: 1em;
+        width: 600px;
+    }
+}
+
+.documentation-dialog #result-content {
+    font-family: 'Courier New', Courier, monospace;
+    background: #aaa;
+    padding: 1em;
+    word-break: break-word;
+}
+
+section.radio-group {
+    margin-bottom: 0.5em;
+}
+
+section.radio-group input {
+    display: none;
+}
+
+section.radio-group div label {
+    display: inline-block;
+    padding: 0.75em 1em;
+    border: none;
+    color: black;
+    font-size: 1rem;
+    background: #ddd;
+}
+
+section.radio-group div label {
+    min-width: 3ch;
+    text-align: center;
+    font-size: 1rem;
+}
+
+
+section.radio-group div label:first-of-type {
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+}
+
+section.radio-group div label:last-of-type {
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+}
+
+section.radio-group div input:checked+label {
+    background: cadetblue;
+    color: white;
+}
+
+.documentation-dialog .range-selector {
+    display: flex;
+    gap: 1em;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.documentation-dialog .range-selector section {
+    flex-grow: 1;
+    width: initial;
+}
+
+.documentation-dialog .hide {
+    display: none;
+}
+
+.admin-dashboard {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    margin: 1em;
+    gap: 1em;
+    background: transparent;
+    width: calc(100% - 2em);
+}
+
+.admin-dashboard .filter-dialog {
+    margin: 0;
+    width: 100%;
+    flex-grow: 1;
+}
+
+.admin-dashboard .table-results table {
+    width: 100%;
+}
+
+
+.admin-dashboard .table-results table th, .admin-dashboard .table-results table td {
+    text-align: left;
+    margin: 0.4em 0;
+}
+
+.admin-dashboard .table-results table tr td:nth-child(3) {
+    display: flex;
+    flex-direction: row;
+}
+
+
+@media screen and (min-width: 480px) {
+    .admin-dashboard .filter-dialog {
+        width: 300px;
+        flex-grow: 0;
+    }
+}
+
+img.icon, button.icon svg {
+    height: 1.2em;
+    width: 1.2em;
+}
+button.icon, a.icon {
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    font-size: 1rem;
+
+    display: flex;
+    align-content: baseline;
+    gap: 0.3em;
+}
+
+button.icon svg, button.icon svg * {
+    fill: white;
+    color: white;
+    stroke: white;
+}
+
+dialog {
+    border: 1px solid rgba(95, 158, 160, 0.5);
+}
+dialog::backdrop {
+    background: rgba(151, 159, 159, 0.39);
+}
+dialog {
+    width: 400px;
+    max-width: 100vh;
 }
\ No newline at end of file
diff --git a/assets/global.js b/assets/global.js
index 67d07a4..12ba5ea 100644
--- a/assets/global.js
+++ b/assets/global.js
@@ -5,11 +5,8 @@ window.addEventListener('load', () => {
         const action = el.querySelector(".dropdown-action");
         const content = el.querySelector(".dropdown-content");
 
-        console.log(action, content, el.offsetWidth, content.offsetWidth);
-
         action.addEventListener('click', () => {
             content.classList.toggle('selected');
-            console.log(content.offsetWidth - action.offsetWidth);
             content.style.marginLeft = `-${(content.offsetWidth - action.offsetWidth)}px`;
         })
     })
diff --git a/main.go b/main.go
index 7ad4c81..28f5637 100644
--- a/main.go
+++ b/main.go
@@ -133,6 +133,7 @@ func loadTemplates(g *gin.Engine) {
 		"templates/dialogs/delete-holiday.gohtml",
 		"templates/dialogs/check-is-a-holiday.gohtml",
 
+		"templates/dialogs/add-country.gohtml",
 		"templates/dialogs/edit-country.gohtml",
 		"templates/dialogs/delete-country.gohtml",
 	)
@@ -267,6 +268,9 @@ func setupAdminDashboard(adminDashboard *gin.RouterGroup, service holiday.Holida
 		}
 		c.Redirect(http.StatusSeeOther, "/admin/countries")
 	})
+	adminDashboard.GET("/dialogs/add-country", func(c *gin.Context) {
+		c.HTML(http.StatusOK, "add-country.gohtml", gin.H{})
+	})
 
 	adminDashboard.GET("/dialogs/add-holiday", func(c *gin.Context) {
 		countries, _ := countryService.Find()
diff --git a/templates/admin_dashboard.gohtml b/templates/admin_dashboard.gohtml
index 0e0739c..f99d3f8 100644
--- a/templates/admin_dashboard.gohtml
+++ b/templates/admin_dashboard.gohtml
@@ -1,101 +1,95 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Holiday-api | Admin dashboard</title>
-    <link rel="stylesheet" href="/assets/style.css">
+    <title>Holiday-api | Admin</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/assets/global.css">
     <script src="/assets/global.js"></script>
 </head>
 <body>
-<div id="dialog-container"></div>
+<div class="background-image" style="position: fixed">
+</div>
 <header>
-    <section class="container">
-        <h1><a href="/">Holiday-api | Admin dashboard</a></h1>
-    </section>
+    <h1><a href="/admin?country=HR">Holiday-api | Admin</a></h1>
+    <div style="flex-grow: 1"></div>
+    <a style="all: unset;" href="/admin/countries">Države</a>
 </header>
-<nav>
-    <section class="container">
-        <a class="selected" href="#">Search</a>
-        <a href="/admin/countries">Countries</a>
-        <button data-type="dialog" data-trigger="#create-card" data-url="/admin/dialogs/add-holiday">Add new holiday</button>
-    </section>
-</nav>
-<main>
-    <section id="search">
-        <article class="card">
+<main class="admin-dashboard">
+    <div class="filter-dialog">
+        <section class="dialog filter-dialog">
+            <h2 style="margin-top: 0.5em">Pretraga</h2>
             <form action="#" method="get">
-                <section>
-                    <label for="country">Country:</label>
+                <section class="form-field">
+                    <label for="country">Država:</label>
                     <select id="country" name="country">
                         {{range $entry := .Countries}}
                             <option {{if eq $.Search.Country $entry.IsoName}}selected{{end}} value="{{$entry.IsoName}}">{{$entry.Name}}</option>
                         {{end}}
                     </select>
                 </section>
-                <section>
-                    <label for="year">Year:</label>
+                <section class="form-field">
+                    <label for="year">Za godinu:</label>
                     <select id="year" name="year">
                         {{range $entry := .Years}}
                             <option {{if intpeq $.Search.Year $entry}}selected{{end}} value="{{$entry}}">{{$entry}}</option>
                         {{end}}
                     </select>
                 </section>
-                <section class="radio-group">
-                    <label>Is state holiday:</label>
+                <section class="radio-group" style="margin-top: 0.5em;">
+                    <label>Državni praznik:</label>
                     <div>
-                        <input type="radio" value="true" name="sh" id="sh_true"><label for="sh_true">True
-                        </label><input type="radio" value="false" name="sh" id="sh_false"><label for="sh_false">False
-                        </label><input type="radio" value="" name="sh" id="sh_any"><label for="sh_any">All</label>
+                        <input type="radio" value="true" name="sh" id="sh_true"><label for="sh_true">Da
+                        </label><input type="radio" value="false" name="sh" id="sh_false"><label for="sh_false">Ne
+                        </label><input type="radio" value="" name="sh" id="sh_any"><label for="sh_any">Svi</label>
                     </div>
-                    <input type="hidden" value="{{.Search.StateHoliday}}" name="state_holiday">
+                    <input type="hidden" value="{{.Search.StateHoliday}}" id="state-holiday" name="state_holiday">
                 </section>
                 <section class="radio-group">
-                    <label>Is religious holiday:</label>
+                    <label>Religiozni praznik:</label>
                     <div>
-                        <input type="radio" value="true" name="rh" id="rh_true"><label for="rh_true">True
-                        </label><input type="radio" value="false" name="rh" id="rh_false"><label for="rh_false">False
-                        </label><input type="radio" value="" name="rh" id="rh_any"><label for="rh_any">All</label>
+                        <input type="radio" value="true" name="rh" id="rh_true"><label for="rh_true">Da
+                        </label><input type="radio" value="false" name="rh" id="rh_false"><label for="rh_false">Ne
+                        </label><input type="radio" value="" name="rh" id="rh_any"><label for="rh_any">Svi</label>
                     </div>
-                    <input type="hidden" value="{{.Search.ReligiousHoliday}}" name="religious_holiday">
-                </section>
-                <section class="actions">
-                    <button class="icon primary" type="submit">
-                        {{ importSvg "/assets/icons/search.svg"}}
-                        <span>Search</span>
-                    </button>
+                    <input type="hidden" value="{{.Search.ReligiousHoliday}}" id="religious-holiday" name="religious_holiday">
                 </section>
+                <div class="button-actions">
+                    <button class="primary">Pretraži</button>
+                </div>
             </form>
-        </article>
-    </section>
-    <section id="results">
-        <table>
-            <thead>
-            <tr>
-                <th>Name</th>
-                <th>Date</th>
-                <th>State</th>
-                <th>Religious</th>
-                <th></th>
-            </tr>
-            </thead>
-            <tbody>
+        </section>
+    </div>
 
-            {{range $entry := .Holidays.Holidays}}
+    <div style="flex-grow: 1">
+        <button style="float: right; margin-top: 0" data-type="dialog" data-trigger="#create-card" data-url="/admin/dialogs/add-holiday" class="primary">Dodaj novi praznik</button>
+        <section class="dialog table-results" style="margin: 0; margin-top: 3.5em" id="results">
+            <table>
+                <thead>
                 <tr>
-                    <td>{{$entry.Name}}</td>
-                    <td>{{$entry.Date.Format "2006-01-02"}}</td>
-                    <td><img class="icon" src="{{if $entry.IsStateHoliday}}/assets/icons/done-v.svg{{else}}/assets/icons/close-x.svg{{end}}"></td>
-                    <td><img class="icon" src="{{if $entry.IsReligiousHoliday}}/assets/icons/done-v.svg{{else}}/assets/icons/close-x.svg{{end}}"></td>
-                    <td>
-                        <button data-type="dialog" data-trigger="#update-card" data-url="/admin/dialogs/edit-holiday?id={{$entry.Id}}" class="icon"><img class="icon" src="/assets/icons/edit.svg"></button>
-                        <button data-type="dialog" data-trigger="#delete-card" data-url="/admin/dialogs/delete-holiday?id={{$entry.Id}}" class="icon"><img class="icon" src="/assets/icons/trash-delete.svg"></button>
-                    </td>
+                    <th>Ime</th>
+                    <th>Datum</th>
+                    <th></th>
                 </tr>
-            {{end}}
-            </tbody>
-        </table>
-    </section>
+                </thead>
+                <tbody>
+
+                {{range $entry := .Holidays.Holidays}}
+                    <tr>
+                        <td>{{$entry.Name}}</td>
+                        <td>{{$entry.Date.Format "02.01.2006"}}</td>
+                        <td>
+                            <button data-type="dialog" data-trigger="#update-card" data-url="/admin/dialogs/edit-holiday?id={{$entry.Id}}" class="icon"><img class="icon" src="/assets/icons/edit.svg"></button>
+                            <button data-type="dialog" data-trigger="#delete-card" data-url="/admin/dialogs/delete-holiday?id={{$entry.Id}}" class="icon"><img class="icon" src="/assets/icons/trash-delete.svg"></button>
+                        </td>
+                    </tr>
+                {{end}}
+                </tbody>
+            </table>
+        </section>
+    </div>
 </main>
 </body>
 </html>
\ No newline at end of file
diff --git a/templates/countries.gohtml b/templates/countries.gohtml
index 6afb689..98e5ee3 100644
--- a/templates/countries.gohtml
+++ b/templates/countries.gohtml
@@ -1,3 +1,4 @@
+<!--
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -57,4 +58,54 @@
     </section>
 </main>
 </body>
+</html>
+-->
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Holiday-api | Države</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/assets/global.css">
+    <script src="/assets/global.js"></script>
+</head>
+<body>
+<div class="background-image" style="position: fixed">
+</div>
+<header>
+    <h1><a href="/admin?country=HR">Holiday-api | Države</a></h1>
+</header>
+<main class="admin-dashboard">
+    <div style="width: 640px; max-width: 100%; margin: auto">
+        <button style="float: right; margin-top: 0" data-type="dialog" data-trigger="#create-card" data-url="/admin/dialogs/add-country" class="primary">Dodaj državu</button>
+        <section class="dialog table-results" style="margin: 0; margin-top: 3.5em" id="results">
+            <table style="width: 100%">
+                <thead>
+                <tr>
+                    <th>Iso ime</th>
+                    <th>Ime</th>
+                    <th></th>
+                </tr>
+                </thead>
+                <tbody>
+
+                {{range $entry := .Countries}}
+                    <tr>
+                        <td>{{$entry.IsoName}}</td>
+                        <td>{{$entry.Name}}</td>
+                        <td>
+                            <button type="button" data-type="dialog" data-trigger="#update-card" data-url="/admin/dialogs/edit-country?id={{$entry.Id}}" class="clean icon"><img class="icon" src="/assets/icons/edit.svg"></button>
+                            <button type="button" data-type="dialog" data-trigger="#delete-card" data-url="/admin/dialogs/delete-country?id={{$entry.Id}}" class="clean icon"><img class="icon" src="/assets/icons/trash-delete.svg"></button>
+                        </td>
+                    </tr>
+                {{end}}
+                </tbody>
+            </table>
+        </section>
+    </div>
+</main>
+</body>
 </html>
\ No newline at end of file
diff --git a/templates/dialogs/add-country.gohtml b/templates/dialogs/add-country.gohtml
new file mode 100644
index 0000000..0df1b88
--- /dev/null
+++ b/templates/dialogs/add-country.gohtml
@@ -0,0 +1,17 @@
+<dialog class="card" id="create-card">
+    <h3 class="card-title">Dodaj državu</h3>
+    <form method="post" action="/admin/countries">
+        <section class="form-field">
+            <label for="name">Iso ime:</label>
+            <input required minlength="2" maxlength="2" id="iso_name" value="{{.Country.IsoName}}" name="iso_name" type="text">
+        </section>
+        <section class="form-field">
+            <label for="name">Ime:</label>
+            <input required minlength="1" maxlength="45" id="name" value="{{.Country.Name}}" name="name" type="text">
+        </section>
+        <section class="actions">
+            <button class="primary" type="submit">Dodaj</button>
+            <button class="secondary" type="button" onclick="closeDialog('#create-card')">Odustani</button>
+        </section>
+    </form>
+</dialog>
\ No newline at end of file
diff --git a/templates/dialogs/add-holiday.gohtml b/templates/dialogs/add-holiday.gohtml
index bd0ff19..5251251 100644
--- a/templates/dialogs/add-holiday.gohtml
+++ b/templates/dialogs/add-holiday.gohtml
@@ -1,35 +1,35 @@
 <dialog class="card" id="create-card">
-    <h3 class="card-title">Create holiday</h3>
+    <h3 class="card-title">Dodaj praznik</h3>
     <form method="post" action="/admin/holidays">
-        <section>
-            <label for="country">Country:</label>
+        <section class="form-field">
+            <label for="country">Država:</label>
             <select id="country" required name="country">
                 {{range $entry := .Countries}}
                     <option value="{{$entry.IsoName}}">{{$entry.Name}}</option>
                 {{end}}
             </select>
         </section>
-        <section>
-            <label for="name">Name:</label>
+        <section class="form-field">
+            <label for="name">Ime:</label>
             <input required id="name" name="name" type="text">
         </section>
-        <section>
-            <label for="description">Description:</label>
+        <section class="form-field">
+            <label for="description">Opis:</label>
             <textarea id="description" name="description"></textarea>
         </section>
-        <section>
-            <label for="date">Date:</label>
+        <section class="form-field">
+            <label for="date">Datum:</label>
             <input required id="date" name="date" type="date">
         </section>
-        <section>
-            <label class="checkbox"><span>State holiday</span><input id="state_holiday" value="true" name="state_holiday" type="checkbox"></label>
+        <section class="form-field">
+            <label class="checkbox"><span>Državni praznik</span><input id="state_holiday" value="true" name="state_holiday" type="checkbox"></label>
         </section>
-        <section>
-            <label class="checkbox"><span>Religious holiday</span><input id="religious_holiday" value="true" name="religious_holiday" type="checkbox"></label>
+        <section class="form-field">
+            <label class="checkbox"><span>Religiozni praznik</span><input id="religious_holiday" value="true" name="religious_holiday" type="checkbox"></label>
         </section>
         <section class="actions">
-            <button type="submit">Create</button>
-            <button type="button" onclick="closeDialog('#create-card')">Cancel</button>
+            <button class="primary" type="submit">Dodaj</button>
+            <button class="secondary" type="button" onclick="closeDialog('#create-card')">Odustani</button>
         </section>
     </form>
 </dialog>
\ No newline at end of file
diff --git a/templates/dialogs/delete-country.gohtml b/templates/dialogs/delete-country.gohtml
index 7adb5b0..1206f69 100644
--- a/templates/dialogs/delete-country.gohtml
+++ b/templates/dialogs/delete-country.gohtml
@@ -1,11 +1,11 @@
 
 <dialog class="card" id="delete-card">
-    <h3 class="card-title">Delete country</h3>
-    <p>Are you sure you want to delete "{{.Country.Name}}"?<br>All holidays for given country will be deleted!</p>
+    <h3 class="card-title">Obriši državu</h3>
+    <p>Jeste li sigurni da želite obrisati "{{.Country.Name}}"?<br>Svi uneseni praznici za danu državu će biti obrisani!</p>
     <form method="post" action="/admin/countries/{{.Country.Id}}/delete">
         <section class="actions">
-            <button type="submit">Delete</button>
-            <button type="button" onclick="closeDialog('#delete-card')">Cancel</button>
+            <button class="primary" type="submit">Obriši</button>
+            <button class="secondary" type="button" onclick="closeDialog('#delete-card')">Odustani</button>
         </section>
     </form>
 </dialog>
\ No newline at end of file
diff --git a/templates/dialogs/delete-holiday.gohtml b/templates/dialogs/delete-holiday.gohtml
index 044233c..ed46a23 100644
--- a/templates/dialogs/delete-holiday.gohtml
+++ b/templates/dialogs/delete-holiday.gohtml
@@ -1,11 +1,11 @@
 
 <dialog class="card" id="delete-card">
-    <h3 class="card-title">Delete holiday</h3>
-    <p>Are you sure you want to delete "{{.Holiday.Name}}"?</p>
+    <h3 class="card-title">Ukloni praznik</h3>
+    <p>Jeste li sigurni da želite ukloniti praznik "{{.Holiday.Name}}"?</p>
     <form method="post" action="/admin/holidays/{{.Holiday.Id}}/delete">
         <section class="actions">
-            <button type="submit">Delete</button>
-            <button type="button" onclick="closeDialog('#delete-card')">Cancel</button>
+            <button class="primary" type="submit">Obriši</button>
+            <button class="secondary" type="button" onclick="closeDialog('#delete-card')">Odustani</button>
         </section>
     </form>
 </dialog>
\ No newline at end of file
diff --git a/templates/dialogs/edit-country.gohtml b/templates/dialogs/edit-country.gohtml
index 692aa5c..a44d1a9 100644
--- a/templates/dialogs/edit-country.gohtml
+++ b/templates/dialogs/edit-country.gohtml
@@ -1,18 +1,18 @@
 <dialog class="card" id="update-card">
-    <h3 class="card-title">Edit country</h3>
+    <h3 class="card-title">Ažuriraj državu</h3>
     <form method="post" action="/admin/countries">
         <input type="hidden" name="id" value="{{.Country.Id}}">
-        <section>
-            <label for="name">Iso name:</label>
+        <section class="form-field">
+            <label for="name">Iso ime:</label>
             <input required minlength="2" maxlength="2" id="iso_name" value="{{.Country.IsoName}}" name="iso_name" type="text">
         </section>
-        <section>
-            <label for="name">Name:</label>
+        <section class="form-field">
+            <label for="name">Ime:</label>
             <input required minlength="1" maxlength="45" id="name" value="{{.Country.Name}}" name="name" type="text">
         </section>
         <section class="actions">
-            <button type="submit">Update</button>
-            <button type="button" onclick="closeDialog('#update-card')">Cancel</button>
+            <button class="primary" type="submit">Ažuriraj</button>
+            <button class="secondary" type="button" onclick="closeDialog('#update-card')">Odustani</button>
         </section>
     </form>
 </dialog>
\ No newline at end of file
diff --git a/templates/dialogs/edit-holiday.gohtml b/templates/dialogs/edit-holiday.gohtml
index 8d475d5..8ad6c8e 100644
--- a/templates/dialogs/edit-holiday.gohtml
+++ b/templates/dialogs/edit-holiday.gohtml
@@ -1,36 +1,36 @@
 <dialog class="card" id="update-card">
-    <h3 class="card-title">Edit holiday</h3>
+    <h3 class="card-title">Ažuriraj praznik</h3>
     <form method="post" action="/admin/holidays">
         <input type="hidden" name="id" value="{{.Holiday.Id}}">
-        <section>
-            <label for="country">Country:</label>
+        <section class="form-field">
+            <label for="country">Država:</label>
             <select id="country" required name="country">
                 {{range $entry := .Countries}}
                     <option {{if eq $.Holiday.Country $entry.IsoName}}selected{{end}} value="{{$entry.IsoName}}">{{$entry.Name}}</option>
                 {{end}}
             </select>
         </section>
-        <section>
-            <label for="name">Name:</label>
+        <section class="form-field">
+            <label for="name">Ime:</label>
             <input required id="name" value="{{.Holiday.Name}}" name="name" type="text">
         </section>
-        <section>
-            <label for="description">Description:</label>
+        <section class="form-field">
+            <label for="description">Opis:</label>
             <textarea id="description" name="description">{{.Holiday.Description}}</textarea>
         </section>
-        <section>
-            <label for="date">Date:</label>
+        <section class="form-field">
+            <label for="date">Datum:</label>
             <input required id="date" value="{{.Holiday.Date.Format "2006-01-02"}}" name="date" type="date">
         </section>
-        <section>
-            <label class="checkbox"><span>State holiday</span><input id="state_holiday" value="true" {{if .Holiday.IsStateHoliday}}checked{{end}} name="state_holiday" type="checkbox"></label>
+        <section class="form-field">
+            <label class="checkbox"><span>Državni praznik</span><input id="state_holiday" value="true" {{if .Holiday.IsStateHoliday}}checked{{end}} name="state_holiday" type="checkbox"></label>
         </section>
-        <section>
-            <label class="checkbox"><span>Religious holiday</span><input id="religious_holiday" value="true" {{if .Holiday.IsReligiousHoliday}}checked{{end}} name="religious_holiday" type="checkbox"></label>
+        <section class="form-field">
+            <label class="checkbox"><span>Religiozni praznik</span><input id="religious_holiday" value="true" {{if .Holiday.IsReligiousHoliday}}checked{{end}} name="religious_holiday" type="checkbox"></label>
         </section>
         <section class="actions">
-            <button type="submit">Update</button>
-            <button type="button" onclick="closeDialog('#update-card')">Cancel</button>
+            <button class="primary" type="submit">Ažuriraj</button>
+            <button class="secondary" type="button" onclick="closeDialog('#update-card')">Odustani</button>
         </section>
     </form>
 </dialog>
\ No newline at end of file
diff --git a/templates/documentation.gohtml b/templates/documentation.gohtml
index 0846200..ae40e71 100644
--- a/templates/documentation.gohtml
+++ b/templates/documentation.gohtml
@@ -1,127 +1,122 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Holiday-api</title>
-    <link rel="stylesheet" href="/assets/style.css">
+    <title>Holiday-api | Dokumentacija</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/assets/global.css">
     <script src="/assets/global.js"></script>
     <script src="/assets/documentation.js"></script>
+
+    <style>
+        .dropdown-content a {
+            all: unset;
+            display: block;
+            padding: 0.5em 1em;
+        }
+        .dropdown-content a:hover {
+            background: rgba(95, 158, 160, 0.2);
+        }
+    </style>
 </head>
 <body>
-<div id="dialog-container"></div>
+<div class="background-image" style="position: fixed;"></div>
 <header>
-    <section class="container">
-        <h1><a href="/">Holiday-api</a></h1>
-    </section>
+    <h1><a href="/">Holiday-api</a> | Dokumentacija</h1>
 </header>
-<nav>
-    <section class="container">
-        <a href="/">Search</a>
-        <a class="selected" href="#">Documentation</a>
-        <button data-type="dialog" data-trigger="#check-is-a-holiday" data-url="/dialogs/check-is-a-holiday">Check is a holiday</button>
-    </section>
-</nav>
-<main>
-    <section id="query">
-        <article class="card" style="margin: 1em;">
-            <form id="query-generator">
-                <section>
-                    <label for="country">Country</label>
-                    <select id="country" name="country">
-                        {{range $entry := .Countries}}
-                            <option value="{{$entry.IsoName}}">{{$entry.Name}}</option>
-                        {{end}}
-                    </select>
-                </section>
+<main class="dialog documentation-dialog">
+    <section style="margin-bottom: 1em;">
+        <section id="query">
+            <article class="card" style="margin: 1em;">
+                <form id="query-generator">
+                    <input type="hidden" id="country" name="country" value="HR">
+                    <section class="form-field">
+                        <label for="content-type">Format</label>
+                        <select id="content-type" name="content-type">
+                            <option value="json">JSON</option>
+                            <option value="xml">XML</option>
+                            <option value="csv">CSV</option>
+                        </select>
+                    </section>
 
-                <section>
-                    <label for="content-type">Content type</label>
-                    <select id="content-type" name="content-type">
-                        <option value="application/json">JSON</option>
-                        <option value="application/xml">XML</option>
-                        <option value="text/csv">CSV</option>
-                    </select>
-                </section>
+                    <article class="optional-selector">
+                        <div class="header">
+                            <section class="form-field">
+                                <label for="date-selector">Izbornik</label>
+                                <select data-type="section-selector" data-selector-prefix="date-selector" id="date-selector" name="date-selector">
+                                    <option value="year">Za godinu</option>
+                                    <option value="date">Za datum</option>
+                                    <option value="range">Za raspon datuma</option>
+                                    <option value="all">Svi</option>
+                                </select>
+                            </section>
+                        </div>
+                        <div data-section-id="date-selector-year">
+                            <section class="form-field">
+                                <label for="dsy-year">Godina</label>
+                                <select id="dsy-year" name="year">
+                                    {{range $entry := .Years}}
+                                        <option value="{{$entry}}">{{$entry}}</option>
+                                    {{end}}
+                                </select>
+                            </section>
+                        </div>
 
-                <article class="optional-selector">
-                    <div class="header">
-                        <section>
-                            <label for="date-selector">Date selector</label>
-                            <select data-type="section-selector" data-selector-prefix="date-selector" id="date-selector" name="date-selector">
-                                <option value="year">Select year</option>
-                                <option value="date">Select date</option>
-                                <option value="range">Select date range</option>
-                                <option value="all">All</option>
-                            </select>
-                        </section>
-                    </div>
+                        <div data-section-id="date-selector-date">
+                            <section class="form-field">
+                                <label for="dsd-date">Datum</label>
+                                <input type="date" id="dsd-date" name="dsd-date">
+                            </section>
+                        </div>
 
-                    <div data-section-id="date-selector-year">
-                        <section>
-                            <label for="dsy-year">Year</label>
-                            <select id="dsy-year" name="year">
-                                {{range $entry := .Years}}
-                                    <option value="{{$entry}}">{{$entry}}</option>
-                                {{end}}
-                            </select>
-                        </section>
-                    </div>
+                        <div class="range-selector" data-section-id="date-selector-range">
+                            <section class="form-field">
+                                <label for="dsr-start-range">Početak raspona</label>
+                                <input type="date" id="dsr-start-range" name="dsr-start-range">
+                            </section>
+                            <section class="form-field">
+                                <label for="dsr-end-range">Kraj raspona</label>
+                                <input type="date" id="dsr-end-range" name="dsr-end-range">
+                            </section>
+                        </div>
+                    </article>
 
-                    <div data-section-id="date-selector-date">
-                        <section>
-                            <label for="dsd-date">Date</label>
-                            <input type="date" id="dsd-date" name="dsd-date">
-                        </section>
-                    </div>
-
-                    <div data-section-id="date-selector-range">
-                        <section>
-                            <label for="dsr-start-range">Start range</label>
-                            <input type="date" id="dsr-start-range" name="dsr-start-range">
-                        </section>
-                        <section>
-                            <label for="dsr-start-range-required">Required</label>
-                            <input type="checkbox" id="dsr-start-range-required" name="dsr-start-range-required">
-                        </section>
-                        <section>
-                            <label for="dsr-end-range">End range</label>
-                            <input type="date" id="dsr-end-range" name="dsr-end-range">
-                        </section>
-                        <section>
-                            <label for="dsr-end-range-required">Required</label>
-                            <input type="checkbox" id="dsr-end-range-required" name="dsr-end-range-required">
-                        </section>
-                    </div>
-                </article>
-
-                <section class="radio-group" style="margin-top: 0.5em;">
-                    <label>Is state holiday:</label>
-                    <div>
-                        <input type="radio" value="true" name="sh" id="sh_true"><label for="sh_true">True
-                        </label><input type="radio" value="false" name="sh" id="sh_false"><label for="sh_false">False
-                        </label><input type="radio" value="" name="sh" id="sh_any"><label for="sh_any">All</label>
-                    </div>
-                    <input type="hidden" id="state-holiday" name="state_holiday">
-                </section>
-                <section class="radio-group">
-                    <label>Is religious holiday:</label>
-                    <div>
-                        <input type="radio" value="true" name="rh" id="rh_true"><label for="rh_true">True
-                        </label><input type="radio" value="false" name="rh" id="rh_false"><label for="rh_false">False
-                        </label><input type="radio" value="" name="rh" id="rh_any"><label for="rh_any">All</label>
-                    </div>
-                    <input type="hidden" id="religious-holiday" name="religious_holiday">
-                </section>
-            </form>
-        </article>
-    </section>
-    <section id="result" style="flex-grow: 1; margin: 1em;">
-        <h3 style="margin-bottom: 1em;">Query</h3>
-        <article id="result-content" class="card source-code">
-            Loading...
-        </article>
+                    <section class="radio-group" style="margin-top: 0.5em;">
+                        <label>Državni praznik:</label>
+                        <div>
+                            <input type="radio" value="true" name="sh" id="sh_true"><label for="sh_true">Da
+                            </label><input type="radio" value="false" name="sh" id="sh_false"><label for="sh_false">Ne
+                            </label><input type="radio" value="" name="sh" id="sh_any"><label for="sh_any">Svi</label>
+                        </div>
+                        <input type="hidden" id="state-holiday" name="state_holiday">
+                    </section>
+                    <section class="radio-group">
+                        <label>Religiozni praznik:</label>
+                        <div>
+                            <input type="radio" value="true" name="rh" id="rh_true"><label for="rh_true">Da
+                            </label><input type="radio" value="false" name="rh" id="rh_false"><label for="rh_false">Ne
+                            </label><input type="radio" value="" name="rh" id="rh_any"><label for="rh_any">Svi</label>
+                        </div>
+                        <input type="hidden" id="religious-holiday" name="religious_holiday">
+                    </section>
+                </form>
+            </article>
+        </section>
+        <section id="result" style="flex-grow: 1; margin: 1em;">
+            <div style="display: flex; flex-wrap: wrap; align-items: baseline">
+                <h3 style="margin-bottom: 1em;">Naredba</h3>
+                <div style="flex-grow: 1"></div>
+                <div>
+                    <a id="query-link" style="text-decoration: none" class="button secondary" href="." target="_blank">Dohvati</a>
+                </div>
+            </div>
+            <article id="result-content">
+                Učitavanje...
+            </article>
+        </section>
     </section>
 </main>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/templates/index.gohtml b/templates/index.gohtml
index 0c99c47..01ec316 100644
--- a/templates/index.gohtml
+++ b/templates/index.gohtml
@@ -11,8 +11,12 @@
 </head>
 <body>
 <div class="background-image">
-    <article class="dialog search-dialog">
+    <header>
         <h1><a href="/">Holiday-api</a></h1>
+        <div style="flex-grow: 1"></div>
+        <a style="all: unset;" href="/documentation">Api dokumentacija</a>
+    </header>
+    <main class="dialog search-dialog">
         <form action="/">
             <div class="form-field">
                 <label for="year">Za godinu:</label>
@@ -26,7 +30,7 @@
                 <button class="primary">Pretraži</button>
             </div>
         </form>
-    </article>
+    </main>
 </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/templates/results.gohtml b/templates/results.gohtml
index 2d20803..4254d9e 100644
--- a/templates/results.gohtml
+++ b/templates/results.gohtml
@@ -39,9 +39,13 @@
 </head>
 <body>
 <div class="background-image" style="position: fixed;"></div>
-<article class="dialog results-dialog">
+<header>
+    <h1><a href="/">Holiday-api</a> | {{deferint $.Search.Year}}</h1>
+    <div style="flex-grow: 1"></div>
+    <a style="all: unset;" href="/documentation">Api dokumentacija</a>
+</header>
+<main class="dialog results-dialog">
     <section style="margin-bottom: 1em;">
-        <h1><a href="/">Holiday-api</a> | {{deferint $.Search.Year}}</h1>
         <form style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1em" action="/">
             <div style="flex-grow: 1;"></div>
             <div class="form-field" style="width: auto;" >
@@ -83,6 +87,6 @@
         {{end}}
         </tbody>
     </table>
-</article>
+</main>
 </body>
 </html>
\ No newline at end of file