diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Hakaton.SlobodaNemaCenu.Web.csproj b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Hakaton.SlobodaNemaCenu.Web.csproj
index 1efedb7..12cfcd4 100644
--- a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Hakaton.SlobodaNemaCenu.Web.csproj
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Hakaton.SlobodaNemaCenu.Web.csproj
@@ -19,6 +19,25 @@
     <Folder Include="Models\Generated\" />
   </ItemGroup>
 
+  <ItemGroup>
+    <None Include="wwwroot\assets\fonts\Montserrat-Bold.woff2" />
+    <None Include="wwwroot\assets\fonts\Montserrat-Light.woff2" />
+    <None Include="wwwroot\assets\fonts\Montserrat-Medium.woff2" />
+    <None Include="wwwroot\assets\fonts\Montserrat-Regular.woff2" />
+    <None Include="wwwroot\assets\fonts\Montserrat-SemiBold.woff2" />
+    <None Include="wwwroot\assets\fonts\svgicons.svg" />
+    <None Include="wwwroot\assets\fonts\svgicons.woff2" />
+    <None Include="wwwroot\assets\fonts\transfonter.org-20231006-200412.zip" />
+    <None Include="wwwroot\assets\images\shape-2.svg" />
+    <None Include="wwwroot\assets\images\star-shape.svg" />
+    <None Include="wwwroot\assets\svg\arrow.svg" />
+    <None Include="wwwroot\assets\svg\facebook.svg" />
+    <None Include="wwwroot\assets\svg\instagram.svg" />
+    <None Include="wwwroot\assets\svg\linkedin.svg" />
+    <None Include="wwwroot\assets\svg\twitter.svg" />
+    <None Include="wwwroot\js\script.js" />
+  </ItemGroup>
+
   <PropertyGroup>
     <!-- Razor files are needed for the backoffice to work correctly -->
     <CopyRazorGenerateFilesToPublishDirectory>true</CopyRazorGenerateFilesToPublishDirectory>
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/CountryDropdownItem.generated.cs b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/CountryDropdownItem.generated.cs
new file mode 100644
index 0000000..840a809
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/CountryDropdownItem.generated.cs
@@ -0,0 +1,68 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+//   This code was generated by a tool.
+//
+//    Umbraco.ModelsBuilder.Embedded v10.2.1+25a20cf
+//
+//   Changes to this file will be lost if the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+using System;
+using System.Linq.Expressions;
+using Umbraco.Cms.Core.Models.PublishedContent;
+using Umbraco.Cms.Core.PublishedCache;
+using Umbraco.Cms.Infrastructure.ModelsBuilder;
+using Umbraco.Cms.Core;
+using Umbraco.Extensions;
+
+namespace Hakaton.SlobodaNemaCenu.Web.Models.Generated
+{
+	/// <summary>Country Dropdown Item</summary>
+	[PublishedModel("countryDropdownItem")]
+	public partial class CountryDropdownItem : PublishedElementModel
+	{
+		// helpers
+#pragma warning disable 0109 // new is redundant
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const string ModelTypeAlias = "countryDropdownItem";
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const PublishedItemType ModelItemType = PublishedItemType.Content;
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public new static IPublishedContentType GetModelContentType(IPublishedSnapshotAccessor publishedSnapshotAccessor)
+			=> PublishedModelUtility.GetModelContentType(publishedSnapshotAccessor, ModelItemType, ModelTypeAlias);
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public static IPublishedPropertyType GetModelPropertyType<TValue>(IPublishedSnapshotAccessor publishedSnapshotAccessor, Expression<Func<CountryDropdownItem, TValue>> selector)
+			=> PublishedModelUtility.GetModelPropertyType(GetModelContentType(publishedSnapshotAccessor), selector);
+#pragma warning restore 0109
+
+		private IPublishedValueFallback _publishedValueFallback;
+
+		// ctor
+		public CountryDropdownItem(IPublishedElement content, IPublishedValueFallback publishedValueFallback)
+			: base(content, publishedValueFallback)
+		{
+			_publishedValueFallback = publishedValueFallback;
+		}
+
+		// properties
+
+		///<summary>
+		/// Country Flag
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("countryFlag")]
+		public virtual global::Umbraco.Cms.Core.Models.MediaWithCrops CountryFlag => this.Value<global::Umbraco.Cms.Core.Models.MediaWithCrops>(_publishedValueFallback, "countryFlag");
+
+		///<summary>
+		/// Country Key
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("countryKey")]
+		public virtual string CountryKey => this.Value<string>(_publishedValueFallback, "countryKey");
+	}
+}
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/EducationCategory.generated.cs b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/EducationCategory.generated.cs
new file mode 100644
index 0000000..335bda0
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/EducationCategory.generated.cs
@@ -0,0 +1,68 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+//   This code was generated by a tool.
+//
+//    Umbraco.ModelsBuilder.Embedded v10.2.1+25a20cf
+//
+//   Changes to this file will be lost if the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+using System;
+using System.Linq.Expressions;
+using Umbraco.Cms.Core.Models.PublishedContent;
+using Umbraco.Cms.Core.PublishedCache;
+using Umbraco.Cms.Infrastructure.ModelsBuilder;
+using Umbraco.Cms.Core;
+using Umbraco.Extensions;
+
+namespace Hakaton.SlobodaNemaCenu.Web.Models.Generated
+{
+	/// <summary>Education Category</summary>
+	[PublishedModel("educationCategory")]
+	public partial class EducationCategory : PublishedContentModel
+	{
+		// helpers
+#pragma warning disable 0109 // new is redundant
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const string ModelTypeAlias = "educationCategory";
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const PublishedItemType ModelItemType = PublishedItemType.Content;
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public new static IPublishedContentType GetModelContentType(IPublishedSnapshotAccessor publishedSnapshotAccessor)
+			=> PublishedModelUtility.GetModelContentType(publishedSnapshotAccessor, ModelItemType, ModelTypeAlias);
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public static IPublishedPropertyType GetModelPropertyType<TValue>(IPublishedSnapshotAccessor publishedSnapshotAccessor, Expression<Func<EducationCategory, TValue>> selector)
+			=> PublishedModelUtility.GetModelPropertyType(GetModelContentType(publishedSnapshotAccessor), selector);
+#pragma warning restore 0109
+
+		private IPublishedValueFallback _publishedValueFallback;
+
+		// ctor
+		public EducationCategory(IPublishedContent content, IPublishedValueFallback publishedValueFallback)
+			: base(content, publishedValueFallback)
+		{
+			_publishedValueFallback = publishedValueFallback;
+		}
+
+		// properties
+
+		///<summary>
+		/// Color
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("color")]
+		public virtual string Color => this.Value<string>(_publishedValueFallback, "color");
+
+		///<summary>
+		/// Title
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("title")]
+		public virtual string Title => this.Value<string>(_publishedValueFallback, "title");
+	}
+}
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/EducationItem.generated.cs b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/EducationItem.generated.cs
new file mode 100644
index 0000000..7fbcbb0
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/EducationItem.generated.cs
@@ -0,0 +1,92 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+//   This code was generated by a tool.
+//
+//    Umbraco.ModelsBuilder.Embedded v10.2.1+25a20cf
+//
+//   Changes to this file will be lost if the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+using System;
+using System.Linq.Expressions;
+using Umbraco.Cms.Core.Models.PublishedContent;
+using Umbraco.Cms.Core.PublishedCache;
+using Umbraco.Cms.Infrastructure.ModelsBuilder;
+using Umbraco.Cms.Core;
+using Umbraco.Extensions;
+
+namespace Hakaton.SlobodaNemaCenu.Web.Models.Generated
+{
+	/// <summary>Education Item</summary>
+	[PublishedModel("educationItem")]
+	public partial class EducationItem : PublishedElementModel
+	{
+		// helpers
+#pragma warning disable 0109 // new is redundant
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const string ModelTypeAlias = "educationItem";
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const PublishedItemType ModelItemType = PublishedItemType.Content;
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public new static IPublishedContentType GetModelContentType(IPublishedSnapshotAccessor publishedSnapshotAccessor)
+			=> PublishedModelUtility.GetModelContentType(publishedSnapshotAccessor, ModelItemType, ModelTypeAlias);
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public static IPublishedPropertyType GetModelPropertyType<TValue>(IPublishedSnapshotAccessor publishedSnapshotAccessor, Expression<Func<EducationItem, TValue>> selector)
+			=> PublishedModelUtility.GetModelPropertyType(GetModelContentType(publishedSnapshotAccessor), selector);
+#pragma warning restore 0109
+
+		private IPublishedValueFallback _publishedValueFallback;
+
+		// ctor
+		public EducationItem(IPublishedElement content, IPublishedValueFallback publishedValueFallback)
+			: base(content, publishedValueFallback)
+		{
+			_publishedValueFallback = publishedValueFallback;
+		}
+
+		// properties
+
+		///<summary>
+		/// Category
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("category")]
+		public virtual global::Umbraco.Cms.Core.Models.PublishedContent.IPublishedContent Category => this.Value<global::Umbraco.Cms.Core.Models.PublishedContent.IPublishedContent>(_publishedValueFallback, "category");
+
+		///<summary>
+		/// Download
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("download")]
+		public virtual global::Umbraco.Cms.Core.Models.MediaWithCrops Download => this.Value<global::Umbraco.Cms.Core.Models.MediaWithCrops>(_publishedValueFallback, "download");
+
+		///<summary>
+		/// Image
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("image")]
+		public virtual global::Umbraco.Cms.Core.Models.MediaWithCrops Image => this.Value<global::Umbraco.Cms.Core.Models.MediaWithCrops>(_publishedValueFallback, "image");
+
+		///<summary>
+		/// Title
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("title")]
+		public virtual string Title => this.Value<string>(_publishedValueFallback, "title");
+
+		///<summary>
+		/// Url
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("url")]
+		public virtual global::Umbraco.Cms.Core.Models.Link Url => this.Value<global::Umbraco.Cms.Core.Models.Link>(_publishedValueFallback, "url");
+	}
+}
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/EducationPage.generated.cs b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/EducationPage.generated.cs
new file mode 100644
index 0000000..b155ff6
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/EducationPage.generated.cs
@@ -0,0 +1,100 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+//   This code was generated by a tool.
+//
+//    Umbraco.ModelsBuilder.Embedded v10.2.1+25a20cf
+//
+//   Changes to this file will be lost if the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+using System;
+using System.Linq.Expressions;
+using Umbraco.Cms.Core.Models.PublishedContent;
+using Umbraco.Cms.Core.PublishedCache;
+using Umbraco.Cms.Infrastructure.ModelsBuilder;
+using Umbraco.Cms.Core;
+using Umbraco.Extensions;
+
+namespace Hakaton.SlobodaNemaCenu.Web.Models.Generated
+{
+	/// <summary>Education Page</summary>
+	[PublishedModel("educationPage")]
+	public partial class EducationPage : PublishedContentModel, IPageBase
+	{
+		// helpers
+#pragma warning disable 0109 // new is redundant
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const string ModelTypeAlias = "educationPage";
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const PublishedItemType ModelItemType = PublishedItemType.Content;
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public new static IPublishedContentType GetModelContentType(IPublishedSnapshotAccessor publishedSnapshotAccessor)
+			=> PublishedModelUtility.GetModelContentType(publishedSnapshotAccessor, ModelItemType, ModelTypeAlias);
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public static IPublishedPropertyType GetModelPropertyType<TValue>(IPublishedSnapshotAccessor publishedSnapshotAccessor, Expression<Func<EducationPage, TValue>> selector)
+			=> PublishedModelUtility.GetModelPropertyType(GetModelContentType(publishedSnapshotAccessor), selector);
+#pragma warning restore 0109
+
+		private IPublishedValueFallback _publishedValueFallback;
+
+		// ctor
+		public EducationPage(IPublishedContent content, IPublishedValueFallback publishedValueFallback)
+			: base(content, publishedValueFallback)
+		{
+			_publishedValueFallback = publishedValueFallback;
+		}
+
+		// properties
+
+		///<summary>
+		/// Banner Image
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("bannerImage")]
+		public virtual global::Umbraco.Cms.Core.Models.MediaWithCrops BannerImage => this.Value<global::Umbraco.Cms.Core.Models.MediaWithCrops>(_publishedValueFallback, "bannerImage");
+
+		///<summary>
+		/// Categories Container
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("categoriesContainer")]
+		public virtual global::Umbraco.Cms.Core.Models.PublishedContent.IPublishedContent CategoriesContainer => this.Value<global::Umbraco.Cms.Core.Models.PublishedContent.IPublishedContent>(_publishedValueFallback, "categoriesContainer");
+
+		///<summary>
+		/// Education Items
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("educationItems")]
+		public virtual global::Umbraco.Cms.Core.Models.Blocks.BlockListModel EducationItems => this.Value<global::Umbraco.Cms.Core.Models.Blocks.BlockListModel>(_publishedValueFallback, "educationItems");
+
+		///<summary>
+		/// Text
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("text")]
+		public virtual string Text => this.Value<string>(_publishedValueFallback, "text");
+
+		///<summary>
+		/// SEO Title
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("sEOTitle")]
+		public virtual string SEotitle => global::Hakaton.SlobodaNemaCenu.Web.Models.Generated.PageBase.GetSEotitle(this, _publishedValueFallback);
+
+		///<summary>
+		/// Title
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("title")]
+		public virtual string Title => global::Hakaton.SlobodaNemaCenu.Web.Models.Generated.PageBase.GetTitle(this, _publishedValueFallback);
+	}
+}
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/Home.generated.cs b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/Home.generated.cs
index 877566d..a5bcc52 100644
--- a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/Home.generated.cs
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/Home.generated.cs
@@ -105,6 +105,14 @@ public Home(IPublishedContent content, IPublishedValueFallback publishedValueFal
 		[ImplementPropertyType("navigationButtonLink")]
 		public virtual global::Umbraco.Cms.Core.Models.Link NavigationButtonLink => this.Value<global::Umbraco.Cms.Core.Models.Link>(_publishedValueFallback, "navigationButtonLink");
 
+		///<summary>
+		/// Navigation Flags
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("navigationFlags")]
+		public virtual global::Umbraco.Cms.Core.Models.Blocks.BlockListModel NavigationFlags => this.Value<global::Umbraco.Cms.Core.Models.Blocks.BlockListModel>(_publishedValueFallback, "navigationFlags");
+
 		///<summary>
 		/// Navigation Logo
 		///</summary>
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/ImageAndTextModule.generated.cs b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/ImageAndTextModule.generated.cs
new file mode 100644
index 0000000..6a94660
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/ImageAndTextModule.generated.cs
@@ -0,0 +1,92 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+//   This code was generated by a tool.
+//
+//    Umbraco.ModelsBuilder.Embedded v10.2.1+25a20cf
+//
+//   Changes to this file will be lost if the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+using System;
+using System.Linq.Expressions;
+using Umbraco.Cms.Core.Models.PublishedContent;
+using Umbraco.Cms.Core.PublishedCache;
+using Umbraco.Cms.Infrastructure.ModelsBuilder;
+using Umbraco.Cms.Core;
+using Umbraco.Extensions;
+
+namespace Hakaton.SlobodaNemaCenu.Web.Models.Generated
+{
+	/// <summary>Image And Text Module</summary>
+	[PublishedModel("imageAndTextModule")]
+	public partial class ImageAndTextModule : PublishedElementModel
+	{
+		// helpers
+#pragma warning disable 0109 // new is redundant
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const string ModelTypeAlias = "imageAndTextModule";
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const PublishedItemType ModelItemType = PublishedItemType.Content;
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public new static IPublishedContentType GetModelContentType(IPublishedSnapshotAccessor publishedSnapshotAccessor)
+			=> PublishedModelUtility.GetModelContentType(publishedSnapshotAccessor, ModelItemType, ModelTypeAlias);
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public static IPublishedPropertyType GetModelPropertyType<TValue>(IPublishedSnapshotAccessor publishedSnapshotAccessor, Expression<Func<ImageAndTextModule, TValue>> selector)
+			=> PublishedModelUtility.GetModelPropertyType(GetModelContentType(publishedSnapshotAccessor), selector);
+#pragma warning restore 0109
+
+		private IPublishedValueFallback _publishedValueFallback;
+
+		// ctor
+		public ImageAndTextModule(IPublishedElement content, IPublishedValueFallback publishedValueFallback)
+			: base(content, publishedValueFallback)
+		{
+			_publishedValueFallback = publishedValueFallback;
+		}
+
+		// properties
+
+		///<summary>
+		/// Body Copy
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("bodyCopy")]
+		public virtual string BodyCopy => this.Value<string>(_publishedValueFallback, "bodyCopy");
+
+		///<summary>
+		/// Image
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("image")]
+		public virtual global::Umbraco.Cms.Core.Models.MediaWithCrops Image => this.Value<global::Umbraco.Cms.Core.Models.MediaWithCrops>(_publishedValueFallback, "image");
+
+		///<summary>
+		/// Intro Text
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("introText")]
+		public virtual string IntroText => this.Value<string>(_publishedValueFallback, "introText");
+
+		///<summary>
+		/// Star Color Picker
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("starColorPicker")]
+		public virtual string StarColorPicker => this.Value<string>(_publishedValueFallback, "starColorPicker");
+
+		///<summary>
+		/// Title
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("title")]
+		public virtual string Title => this.Value<string>(_publishedValueFallback, "title");
+	}
+}
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/ImageAndTextV2.generated.cs b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/ImageAndTextV2.generated.cs
new file mode 100644
index 0000000..ae54392
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/ImageAndTextV2.generated.cs
@@ -0,0 +1,91 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+//   This code was generated by a tool.
+//
+//    Umbraco.ModelsBuilder.Embedded v10.2.1+25a20cf
+//
+//   Changes to this file will be lost if the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+using System;
+using System.Linq.Expressions;
+using Umbraco.Cms.Core.Models.PublishedContent;
+using Umbraco.Cms.Core.PublishedCache;
+using Umbraco.Cms.Infrastructure.ModelsBuilder;
+using Umbraco.Cms.Core;
+using Umbraco.Extensions;
+
+namespace Hakaton.SlobodaNemaCenu.Web.Models.Generated
+{
+	/// <summary>Image And Text V2</summary>
+	[PublishedModel("imageAndTextV2")]
+	public partial class ImageAndTextV2 : PublishedElementModel
+	{
+		// helpers
+#pragma warning disable 0109 // new is redundant
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const string ModelTypeAlias = "imageAndTextV2";
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const PublishedItemType ModelItemType = PublishedItemType.Content;
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public new static IPublishedContentType GetModelContentType(IPublishedSnapshotAccessor publishedSnapshotAccessor)
+			=> PublishedModelUtility.GetModelContentType(publishedSnapshotAccessor, ModelItemType, ModelTypeAlias);
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public static IPublishedPropertyType GetModelPropertyType<TValue>(IPublishedSnapshotAccessor publishedSnapshotAccessor, Expression<Func<ImageAndTextV2, TValue>> selector)
+			=> PublishedModelUtility.GetModelPropertyType(GetModelContentType(publishedSnapshotAccessor), selector);
+#pragma warning restore 0109
+
+		private IPublishedValueFallback _publishedValueFallback;
+
+		// ctor
+		public ImageAndTextV2(IPublishedElement content, IPublishedValueFallback publishedValueFallback)
+			: base(content, publishedValueFallback)
+		{
+			_publishedValueFallback = publishedValueFallback;
+		}
+
+		// properties
+
+		///<summary>
+		/// Description
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("description")]
+		public virtual string Description => this.Value<string>(_publishedValueFallback, "description");
+
+		///<summary>
+		/// Flip: Set this if you want to flip content.
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[ImplementPropertyType("flip")]
+		public virtual bool Flip => this.Value<bool>(_publishedValueFallback, "flip");
+
+		///<summary>
+		/// Image
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("image")]
+		public virtual global::Umbraco.Cms.Core.Models.MediaWithCrops Image => this.Value<global::Umbraco.Cms.Core.Models.MediaWithCrops>(_publishedValueFallback, "image");
+
+		///<summary>
+		/// Short Text
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("shortText")]
+		public virtual string ShortText => this.Value<string>(_publishedValueFallback, "shortText");
+
+		///<summary>
+		/// Title
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("title")]
+		public virtual string Title => this.Value<string>(_publishedValueFallback, "title");
+	}
+}
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/ImageBox.generated.cs b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/ImageBox.generated.cs
new file mode 100644
index 0000000..c0f9b2a
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/ImageBox.generated.cs
@@ -0,0 +1,68 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+//   This code was generated by a tool.
+//
+//    Umbraco.ModelsBuilder.Embedded v10.2.1+25a20cf
+//
+//   Changes to this file will be lost if the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+using System;
+using System.Linq.Expressions;
+using Umbraco.Cms.Core.Models.PublishedContent;
+using Umbraco.Cms.Core.PublishedCache;
+using Umbraco.Cms.Infrastructure.ModelsBuilder;
+using Umbraco.Cms.Core;
+using Umbraco.Extensions;
+
+namespace Hakaton.SlobodaNemaCenu.Web.Models.Generated
+{
+	/// <summary>Image Box</summary>
+	[PublishedModel("imageBox")]
+	public partial class ImageBox : PublishedElementModel
+	{
+		// helpers
+#pragma warning disable 0109 // new is redundant
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const string ModelTypeAlias = "imageBox";
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const PublishedItemType ModelItemType = PublishedItemType.Content;
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public new static IPublishedContentType GetModelContentType(IPublishedSnapshotAccessor publishedSnapshotAccessor)
+			=> PublishedModelUtility.GetModelContentType(publishedSnapshotAccessor, ModelItemType, ModelTypeAlias);
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public static IPublishedPropertyType GetModelPropertyType<TValue>(IPublishedSnapshotAccessor publishedSnapshotAccessor, Expression<Func<ImageBox, TValue>> selector)
+			=> PublishedModelUtility.GetModelPropertyType(GetModelContentType(publishedSnapshotAccessor), selector);
+#pragma warning restore 0109
+
+		private IPublishedValueFallback _publishedValueFallback;
+
+		// ctor
+		public ImageBox(IPublishedElement content, IPublishedValueFallback publishedValueFallback)
+			: base(content, publishedValueFallback)
+		{
+			_publishedValueFallback = publishedValueFallback;
+		}
+
+		// properties
+
+		///<summary>
+		/// Image
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("image")]
+		public virtual global::Umbraco.Cms.Core.Models.MediaWithCrops Image => this.Value<global::Umbraco.Cms.Core.Models.MediaWithCrops>(_publishedValueFallback, "image");
+
+		///<summary>
+		/// Link
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("link")]
+		public virtual global::Umbraco.Cms.Core.Models.Link Link => this.Value<global::Umbraco.Cms.Core.Models.Link>(_publishedValueFallback, "link");
+	}
+}
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/ImageModule.generated.cs b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/ImageModule.generated.cs
index de09372..6f75121 100644
--- a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/ImageModule.generated.cs
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/ImageModule.generated.cs
@@ -48,7 +48,7 @@ public ImageModule(IPublishedElement content, IPublishedValueFallback publishedV
 		}
 
 		// properties
-		
+
 		///<summary>
 		/// Clickable Link
 		///</summary>
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/RepoContainer.generated.cs b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/RepoContainer.generated.cs
new file mode 100644
index 0000000..cd65e68
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/RepoContainer.generated.cs
@@ -0,0 +1,52 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+//   This code was generated by a tool.
+//
+//    Umbraco.ModelsBuilder.Embedded v10.2.1+25a20cf
+//
+//   Changes to this file will be lost if the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+using System;
+using System.Linq.Expressions;
+using Umbraco.Cms.Core.Models.PublishedContent;
+using Umbraco.Cms.Core.PublishedCache;
+using Umbraco.Cms.Infrastructure.ModelsBuilder;
+using Umbraco.Cms.Core;
+using Umbraco.Extensions;
+
+namespace Hakaton.SlobodaNemaCenu.Web.Models.Generated
+{
+	/// <summary>Repo Container</summary>
+	[PublishedModel("repoContainer")]
+	public partial class RepoContainer : PublishedContentModel
+	{
+		// helpers
+#pragma warning disable 0109 // new is redundant
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const string ModelTypeAlias = "repoContainer";
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const PublishedItemType ModelItemType = PublishedItemType.Content;
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public new static IPublishedContentType GetModelContentType(IPublishedSnapshotAccessor publishedSnapshotAccessor)
+			=> PublishedModelUtility.GetModelContentType(publishedSnapshotAccessor, ModelItemType, ModelTypeAlias);
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public static IPublishedPropertyType GetModelPropertyType<TValue>(IPublishedSnapshotAccessor publishedSnapshotAccessor, Expression<Func<RepoContainer, TValue>> selector)
+			=> PublishedModelUtility.GetModelPropertyType(GetModelContentType(publishedSnapshotAccessor), selector);
+#pragma warning restore 0109
+
+		private IPublishedValueFallback _publishedValueFallback;
+
+		// ctor
+		public RepoContainer(IPublishedContent content, IPublishedValueFallback publishedValueFallback)
+			: base(content, publishedValueFallback)
+		{
+			_publishedValueFallback = publishedValueFallback;
+		}
+
+		// properties
+	}
+}
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/Repository.generated.cs b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/Repository.generated.cs
new file mode 100644
index 0000000..acb098e
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/Repository.generated.cs
@@ -0,0 +1,52 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+//   This code was generated by a tool.
+//
+//    Umbraco.ModelsBuilder.Embedded v10.2.1+25a20cf
+//
+//   Changes to this file will be lost if the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+using System;
+using System.Linq.Expressions;
+using Umbraco.Cms.Core.Models.PublishedContent;
+using Umbraco.Cms.Core.PublishedCache;
+using Umbraco.Cms.Infrastructure.ModelsBuilder;
+using Umbraco.Cms.Core;
+using Umbraco.Extensions;
+
+namespace Hakaton.SlobodaNemaCenu.Web.Models.Generated
+{
+	/// <summary>Repository</summary>
+	[PublishedModel("repository")]
+	public partial class Repository : PublishedContentModel
+	{
+		// helpers
+#pragma warning disable 0109 // new is redundant
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const string ModelTypeAlias = "repository";
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		public new const PublishedItemType ModelItemType = PublishedItemType.Content;
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public new static IPublishedContentType GetModelContentType(IPublishedSnapshotAccessor publishedSnapshotAccessor)
+			=> PublishedModelUtility.GetModelContentType(publishedSnapshotAccessor, ModelItemType, ModelTypeAlias);
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public static IPublishedPropertyType GetModelPropertyType<TValue>(IPublishedSnapshotAccessor publishedSnapshotAccessor, Expression<Func<Repository, TValue>> selector)
+			=> PublishedModelUtility.GetModelPropertyType(GetModelContentType(publishedSnapshotAccessor), selector);
+#pragma warning restore 0109
+
+		private IPublishedValueFallback _publishedValueFallback;
+
+		// ctor
+		public Repository(IPublishedContent content, IPublishedValueFallback publishedValueFallback)
+			: base(content, publishedValueFallback)
+		{
+			_publishedValueFallback = publishedValueFallback;
+		}
+
+		// properties
+	}
+}
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/SmallBanner.generated.cs b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/SmallBanner.generated.cs
index 7901f45..36348f7 100644
--- a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/SmallBanner.generated.cs
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/SmallBanner.generated.cs
@@ -57,6 +57,22 @@ public SmallBanner(IPublishedElement content, IPublishedValueFallback publishedV
 		[ImplementPropertyType("bannerImage")]
 		public virtual global::Umbraco.Cms.Core.Models.MediaWithCrops BannerImage => this.Value<global::Umbraco.Cms.Core.Models.MediaWithCrops>(_publishedValueFallback, "bannerImage");
 
+		///<summary>
+		/// BoxComment
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("boxComment")]
+		public virtual string BoxComment => this.Value<string>(_publishedValueFallback, "boxComment");
+
+		///<summary>
+		/// Comment
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("comment")]
+		public virtual string Comment => this.Value<string>(_publishedValueFallback, "comment");
+
 		///<summary>
 		/// Image Example
 		///</summary>
@@ -80,5 +96,13 @@ public SmallBanner(IPublishedElement content, IPublishedValueFallback publishedV
 		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
 		[ImplementPropertyType("title")]
 		public virtual string Title => this.Value<string>(_publishedValueFallback, "title");
+
+		///<summary>
+		/// Triangle Comment
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "10.2.1+25a20cf")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("triangleComment")]
+		public virtual string TriangleComment => this.Value<string>(_publishedValueFallback, "triangleComment");
 	}
 }
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/ood.flag b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/ood.flag
deleted file mode 100644
index 2eb6eff..0000000
--- a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Models/Generated/ood.flag
+++ /dev/null
@@ -1,2 +0,0 @@
-THIS FILE INDICATES THAT MODELS ARE OUT-OF-DATE
-
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/AboutUsPage.cshtml b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/AboutUsPage.cshtml
index 5959880..284d8b8 100644
--- a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/AboutUsPage.cshtml
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/AboutUsPage.cshtml
@@ -8,71 +8,6 @@
     
     @Html.GetBlockListHtml(Model.PageContent)
 
-    <!-- inline styles in rte will be added through the Rich text editor, here we add it to check how it looks, don't add that in BE -->
-    <section class="image-text-box">
-        <div class="wrap">
-            <div class="image-text-box__wrap">
-                <div class="image-text-box__image">
-                    <img src="./assets/images/demo.jpg" alt="Image exemple" />
-                </div>
-                <div class="image-text-box__content">
-                    <h4 class="h4">About us</h4>
-                    <p class="text-small">
-                        Dečiji brakovi uskraćuju devojčicama slobodu izbora,
-                        obrazovanje, budućnost i snove. Da bismo im pružili istinsku
-                        podršku i zaštitu i okončali dečije brakove, potrebno je da se
-                        svi uključimo. Zato je u je osnovana Nacionalna koalicija za
-                        okončanje dečjih brakova.Nacionalna koalicija za okončanje
-                        dečjih brakova predstavlja zajednicu pojedinaca, institucija i
-                        organizacija koji zajedno rade na jačanju opcija bezbednog
-                        izbora za devojčice, naročito devojčica romske nacionalnosti, da
-                        donose vlastitite bezbedne izbore o životu i budućnosti, kao i
-                        na osnaživanju žena i muškaraca, roditelja, kao i budućih
-                        roditelja, da menjaju postojeću praksu dečijih brakova. Još
-                        jednom glasno kažemo "Detinjstvo, ne brak!".
-                    </p>
-                    <div class="image-box__comment">
-                        <span>Sloboda Nema Cenu</span>
-                        <div class="triangle-comment">
-                            <span class="sr-only">Triangle shape</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <section class="image-text-box reverse">
-        <div class="wrap">
-            <div class="image-text-box__wrap">
-                <div class="image-text-box__image">
-                    <img src="./assets/images/demo.jpg" alt="Image exemple" />
-                </div>
-                <div class="image-text-box__content">
-                    <h4 class="h4">About us</h4>
-                    <p class="text-small">
-                        Dečiji brakovi uskraćuju devojčicama slobodu izbora,
-                        obrazovanje, budućnost i snove. Da bismo im pružili istinsku
-                        podršku i zaštitu i okončali dečije brakove, potrebno je da se
-                        svi uključimo. Zato je u je osnovana Nacionalna koalicija za
-                        okončanje dečjih brakova.Nacionalna koalicija za okončanje
-                        dečjih brakova predstavlja zajednicu pojedinaca, institucija i
-                        organizacija koji zajedno rade na jačanju opcija bezbednog
-                        izbora za devojčice, naročito devojčica romske nacionalnosti, da
-                        donose vlastitite bezbedne izbore o životu i budućnosti, kao i
-                        na osnaživanju žena i muškaraca, roditelja, kao i budućih
-                        roditelja, da menjaju postojeću praksu dečijih brakova. Još
-                        jednom glasno kažemo "Detinjstvo, ne brak!".
-                    </p>
-                    <div class="image-box__comment">
-                        <span>Sloboda Nema Cenu</span>
-                        <div class="triangle-comment">
-                            <span class="sr-only">Triangle shape</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
     <section class="image-grid">
         <div class="wrap">
             <div class="image-grid-wrap">
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/EducationPage.cshtml b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/EducationPage.cshtml
new file mode 100644
index 0000000..92e2620
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/EducationPage.cshtml
@@ -0,0 +1,78 @@
+@using Umbraco.Cms.Web.Common.PublishedModels;
+@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.EducationPage>
+@using ContentModels = Hakaton.SlobodaNemaCenu.Web.Models.Generated;
+@{
+    Layout = "_Layout.cshtml";
+    var categories = Model.CategoriesContainer.Children<ContentModels.EducationCategory>() ?? Array.Empty<ContentModels.EducationCategory>();
+    var pageUrl = Model.Url(mode:UrlMode.Absolute);
+    var categoryQueryParam = Context.Request.Query["categoryId"];
+    int categoryId = 0;
+    if(categoryQueryParam.Any()){
+        int.TryParse(categoryQueryParam.First(), out categoryId);
+    }
+    var items = Model.EducationItems.Select(e => e.Content).Cast<ContentModels.EducationItem>()
+    .Where(ei => categoryId == 0 || ei.Category?.Id == categoryId);
+    var checkedCategory = categories.FirstOrDefault(c => c.Id == categoryId);
+}
+
+  <main class="main">
+      <section class="banner small">
+        <div class="wrap">
+          <div class="banner-wrap">
+            <div class="banner-text">
+              <h1 class="h1 banner-title">@Model.Title</h1>
+              <p class="text">
+                @Model.Text
+              </p>
+            </div>
+            @if(Model.BannerImage is not null){
+                    <div class="banner-img">
+                        <img src="@Model.BannerImage.GetCropUrl()" alt="banner image" />
+                    </div>
+            }
+            
+       
+          </div>
+        </div>
+      </section>
+      <section class="education-filters">
+        <div class="wrap">
+          <div class="checkbox-dropdown">
+            <button class="btn checkbox-dropdown-btn js-dropdown-btn">
+                    @(@checkedCategory?.Title ?? "Svi" ) <span class="icon icon-dropdown"></span>
+            </button>
+            <ul class="checkbox-dropdown-list js-dropdown-list">
+              <li>
+                <label>
+                            <input type="checkbox" value="Svi" name="Svi" onClick="clickCategory('@pageUrl')" checked />
+                  <span class="checkmark"></span>Svi</label
+                >
+              </li>
+              @foreach(var item in categories){
+                        var url = $"{pageUrl}?categoryId={item.Id}";
+                        <li >
+                        <label>
+                                <input type="checkbox" value="mediji" name="mediji" onClick="clickCategory('@url')" /><span class="checkmark"></span>@item.Title
+                        </label>
+                    </li>
+              }
+            </ul>
+          </div>
+        </div>
+      </section>
+      <section class="education-cards">
+        <div class="wrap">
+          <div class="education-cards__wrap">
+                @foreach(var item in items){
+                    @Html.Partial("~/Views/Partials/blocklist/Components/educationItem.cshtml", item)
+                }
+          </div>
+        </div>
+      </section>
+    </main>
+
+<script>
+    function clickCategory(url){
+        location.href = url;
+    }
+</script>
\ No newline at end of file
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Home.cshtml b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Home.cshtml
index dd7aaa5..c307787 100644
--- a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Home.cshtml
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Home.cshtml
@@ -9,200 +9,5 @@
 
     @Html.GetBlockListHtml(Model.PageContent)
 
-
-    <section class="image-box">
-        <div class="wrap">
-            <div class="image-box__wrap">
-                <div class="image-box__img">
-                    <a href="/" class="image-box__link">
-                        <img src="./assets/images/demo.jpg" alt="Image exemple" />
-                    </a>
-                </div>
-
-                <div class="image-box__comment">
-                    <span class="grey">Sloboda Nema Cenu,</span>
-                    <span>KC Liman</span>
-                    <div class="triangle-comment">
-                        <span class="sr-only">Triangle shape</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <section class="image-text">
-        <div class="wrap">
-            <div class="image-text__wrap">
-                <div class="image-text__content">
-                    <h2 class="h2 image-text__title">Trgovina ljudima</h2>
-                    <p class="image-text__paragraph bold text-small">
-                        Rad smo započeli kao neformalna grupa građanja, ali smo se od
-                        početka trudili da rame uz rame na prevenciji trgovine ljudima
-                        radimo zajedno sa predstavnciima državnih institucija, drugim
-                        organizacijama i loklanim timovima.
-                    </p>
-                    <p class="image-text__paragraph text-small">
-                        Rad smo započeli kao neformalna grupa građanja, ali smo se od
-                        početka trudili da rame uz rame na prevenciji trgovine ljudima
-                        radimo zajedno sa predstavnciima državnih institucija, drugim
-                        organizacijama i loklanim timovima.
-                    </p>
-                </div>
-                <div class="image-text__image">
-                    <img src="./assets/images/star-shape.svg"
-                         alt="Svg shape"
-                         class="image-text__image-shape" />
-                    <img src="./assets/images/image-text.png"
-                         alt="Image alt text"
-                         class="image-text__image-main" />
-                </div>
-            </div>
-        </div>
-    </section>
-    
-    <section class="shape-divider">
-        <div class="wrap">
-            <img src="./assets/images/shape-divider.png"
-                 alt="Shape divider image" />
-        </div>
-    </section>
-    <section class="related-news">
-        <div class="wrap">
-            <div class="related-news__top">
-                <h2 class="h2">Activities</h2>
-                <a href="javascript:;" class="btn related-news__btn">See all activities</a>
-            </div>
-            <div class="related-news__cards swiper-container js-swiper">
-                <!-- Additional required wrapper -->
-                <div class="swiper-wrapper">
-                    <!-- Slides -->
-                    <div class="swiper-slide related-news__card">
-                        <div class="rated-news__card-top">
-                            <img src="./assets/images/demo.jpg" alt="Card img" />
-                            <div class="related-news__tags">
-                                <span class="related-news__tag date">13/09/2023</span>
-                                <span class="related-news__tag place">KC Liman</span>
-                            </div>
-                        </div>
-                        <div class="related-news__card-content">
-                            <h4 class="h4 related-news__card-title">
-                                Mladi o trgovini ljudima
-                            </h4>
-                            <p class="text-small">
-                                Mapa je u formi edukativnog i informativnog materijala koja
-                                u sebi sadrži kontakte svih važnih institucija i OCD, a koji
-                                se bave borbom protiv trgovine ljudima.
-                            </p>
-                            <div class="related-news__link">
-                                <a href="/" target="_blank">
-                                    Read more
-                                    <span class="icon icon-arrow">
-                                        <span class="sr-only">read more icon</span>
-                                    </span>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="swiper-slide related-news__card">
-                        <div class="rated-news__card-top">
-                            <img src="./assets/images/demo.jpg" alt="Card img" />
-                            <div class="related-news__tags">
-                                <span class="related-news__tag date">13/09/2023</span>
-                                <span class="related-news__tag place">KC Liman</span>
-                            </div>
-                        </div>
-                        <div class="related-news__card-content">
-                            <h4 class="h4 related-news__card-title">
-                                Mladi o trgovini ljudima
-                            </h4>
-                            <p class="text-small">
-                                Mapa je u formi edukativnog i informativnog materijala koja
-                                u sebi sadrži kontakte svih važnih institucija i OCD, a koji
-                                se bave borbom protiv trgovine ljudima.
-                            </p>
-                            <div class="related-news__link">
-                                <a href="/" target="_blank">
-                                    Read more
-                                    <span class="icon icon-arrow">
-                                        <span class="sr-only">read more icon</span>
-                                    </span>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="swiper-slide related-news__card">
-                        <div class="rated-news__card-top">
-                            <img src="./assets/images/demo.jpg" alt="Card img" />
-                            <div class="related-news__tags">
-                                <span class="related-news__tag date">13/09/2023</span>
-                                <span class="related-news__tag place">KC Liman</span>
-                            </div>
-                        </div>
-                        <div class="related-news__card-content">
-                            <h4 class="h4 related-news__card-title">
-                                Mladi o trgovini ljudima
-                            </h4>
-                            <p class="text-small">
-                                Mapa je u formi edukativnog i informativnog materijala koja
-                                u sebi sadrži kontakte svih važnih institucija i OCD, a koji
-                                se bave borbom protiv trgovine ljudima.
-                            </p>
-                            <div class="related-news__link">
-                                <a href="/" target="_blank">
-                                    Read more
-                                    <span class="icon icon-arrow">
-                                        <span class="sr-only">read more icon</span>
-                                    </span>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <a href="javascript:;" class="btn related-news__btn show-on-mobile">See all activities</a>
-        </div>
-    </section>
-    
-    <section class="image-box no-border">
-        <div class="wrap">
-            <div class="image-box__wrap">
-                <div class="image-box__img">
-                    <a href="/" class="image-box__link">
-                        <img src="./assets/images/mapa.png" alt="Image exemple" />
-                    </a>
-                </div>
-            </div>
-        </div>
-    </section>
-    <section class="image-text">
-        <div class="wrap">
-            <div class="image-text__wrap">
-                <div class="image-text__content">
-                    <h2 class="h2 image-text__title">About us</h2>
-                    <p class="image-text__paragraph bold text-small">
-                        Rad smo započeli kao neformalna grupa građanja, ali smo se od
-                        početka trudili da rame uz rame na prevenciji trgovine ljudima
-                        radimo zajedno sa predstavnciima državnih institucija, drugim
-                        organizacijama i loklanim timovima.
-                    </p>
-                    <p class="image-text__paragraph text-small">
-                        Nakon 7 godina kroz koje smo kao neformalna grupa sakupljali
-                        iskustvo i unapređivali znanje procenili smo da smo spremi za
-                        korak dalje i za veće učšće u borbi protiv trgovine ljudima.
-                        Simbolično, na Evropski dan borbe protiv trgovine ljudima 2020.
-                        godine održana osnivačka skupština na kojoj je Neformalna grupa
-                        „Sloboda nema cenu“ postala Udruženje građana. “ Sloboda nema
-                        cenu“ koje broji 7 članica.
-                    </p>
-                </div>
-                <div class="image-text__image">
-                    <img src="./assets/images/shape-2.svg"
-                         alt="Svg shape"
-                         class="image-text__image-shape" />
-                    <img src="./assets/images/image-text.png"
-                         alt="Image alt text"
-                         class="image-text__image-main" />
-                </div>
-            </div>
-        </div>
-    </section>
+        
 </main>
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/Header.cshtml b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/Header.cshtml
index 3c05c8a..bbf9390 100644
--- a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/Header.cshtml
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/Header.cshtml
@@ -28,16 +28,48 @@
                 </nav>
             }
             <div class="header-action">
-                @*TREBA DODATI IKONICE ZA JEZIKE I NAPRAVITI FUNKCIONALNOST ZA JEZIKE*@
-                <div class="language-dropdown">
-                    @if(homePage.Cultures != null && homePage.Cultures.Any())
-                    {
-                        @foreach (var lang in homePage.Cultures)
-                        {
-                            <p>@lang.Key</p>
+                @if(homePage.NavigationFlags != null && homePage.NavigationFlags.Any())
+                {
+                    <div class="language-dropdown">
+                        @{
+                            var currentCulture = Model.GetCultureFromDomains();
+
+                            if (currentCulture.Equals("sr"))
+                            {
+                                <button class="btn js-dropdown-btn checkbox-dropdown-btn">
+                                    <img src="./assets/images/state.svg" alt="CountryFlag">
+                                    <span class="icon icon-dropdown"></span>
+                                </button>
+                            }
+
+                            if (currentCulture.Equals("en-US"))
+                            {
+                                <button class="btn js-dropdown-btn checkbox-dropdown-btn">
+                                    <img src="./assets/images/state.svg" alt="CountryFlag">
+                                    <span class="icon icon-dropdown"></span>
+                                </button>
+                            }
+
+                            if (currentCulture.Equals("hu"))
+                            {
+                                <button class="btn js-dropdown-btn checkbox-dropdown-btn">
+                                    <img src="./assets/images/state.svg" alt="CountryFlag">
+                                    <span class="icon icon-dropdown"></span>
+                                </button>
+                            }
                         }
-                    }
-                </div>
+                        <ul class="js-dropdown-list checkbox-dropdown-list">
+                            @foreach(var item in homePage.NavigationFlags)
+                            {
+                                var countryItem = (CountryDropdownItem)item.Content;
+
+                                <li data-country-key="@countryItem.CountryKey">
+                                    <img src="@countryItem.CountryFlag.Url()" alt="@countryItem.CountryFlag.Name">
+                                </li>
+                            }
+                        </ul>
+                    </div>
+                }
                 <button type="button" class="mobile-menu">
                     <div><span class="sr-only">Mobile menu button</span></div>
                 </button>
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/blocklist/Components/educationItem.cshtml b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/blocklist/Components/educationItem.cshtml
new file mode 100644
index 0000000..512e3d8
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/blocklist/Components/educationItem.cshtml
@@ -0,0 +1,61 @@
+@using ContentModels = Hakaton.SlobodaNemaCenu.Web.Models.Generated;
+@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.EducationItem>
+@{
+    var item = Model;
+    var category = item.Category as ContentModels.EducationCategory;
+    var categoryName = getClass((item.Category as ContentModels.EducationCategory)?.Color?.ToLowerInvariant());
+
+}
+
+<div class="education-card @categoryName">
+    <div class="education-card-top">
+        @if(item.Image is not null){
+            <img src="@item.Image.Url()" alt="" />
+        }
+        <div class="image-box__comment">
+            <span>@category.Title</span>
+            <div class="triangle-comment">
+                <span class="sr-only">Triangle shape</span>
+            </div>
+        </div>
+    </div>
+    <div class="education-card-content">
+        <p class="education-card__text">@item.Title</p>
+        <div class="education-icons">
+            @if(item.Download is not null){
+                <a href="@item.Download.Url()" class="education-icon" download>
+                    <span class="icon icon-download"><span class="sr-only">Download</span></span>
+                </a>
+            }
+            @if(item.Url is not null){
+                <a href="@item.Url.Url" class="education-icon">
+                    <span class="icon icon-share"><span class="sr-only">Share</span></span>
+                </a>
+            }
+           
+        </div>
+    </div>
+</div>
+
+
+
+
+@functions{
+
+    string getClass(string name) {
+        if (string.IsNullOrEmpty(name)) return string.Empty;
+
+        var colorDictionary = new Dictionary<string, string>{
+            {"light blue", "profesional"},
+            {"blue", "people"},
+            {"dark blue","media" } };
+        if(colorDictionary.TryGetValue(name, out var value)){
+              return value;
+          }
+      
+          return "profesional";
+
+    }
+    
+    
+}
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/blocklist/Components/imageAndTextModule.cshtml b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/blocklist/Components/imageAndTextModule.cshtml
new file mode 100644
index 0000000..113adb5
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/blocklist/Components/imageAndTextModule.cshtml
@@ -0,0 +1,55 @@
+@using ContentModels = Hakaton.SlobodaNemaCenu.Web.Models.Generated;
+@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockListItem>
+@{
+    var item = Model.Content as ContentModels.ImageAndTextModule;
+}
+
+<section class="image-text">
+    <div class="wrap">
+        <div class="image-text__wrap">
+        <div class="image-text__content">
+            <h2 class="h2 image-text__title">@item.Title</h2>
+            <p class="image-text__paragraph bold text-small">
+            @item.IntroText
+            </p>
+            <p class="image-text__paragraph text-small">
+            @item.BodyCopy
+            </p>
+        </div>
+        <div class="image-text__image">
+                @if(item.StarColorPicker.Equals("Dark blue"))
+                {
+                    <img
+                    src="./assets/images/shape-2.svg"
+                    alt="Svg shape"
+                    class="image-text__image-shape"
+                    />
+                }
+                else
+                {
+                    <img
+                    src="./assets/images/star-shape.svg"
+                    alt="Svg shape"
+                    class="image-text__image-shape"
+                    />
+                }
+                
+                @if (item.Image != null)
+                {
+                    <img               
+                    src="@item.Image?.Url()"
+                    class="image-text__image-main"
+                    />
+                }
+                else
+                {
+                    <img               
+                    alt="Image alt text"
+                    class="image-text__image-main"
+                    />
+                }
+
+        </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/blocklist/Components/imageAndTextV2.cshtml b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/blocklist/Components/imageAndTextV2.cshtml
new file mode 100644
index 0000000..e815e1c
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/blocklist/Components/imageAndTextV2.cshtml
@@ -0,0 +1,27 @@
+@using ContentModels = Hakaton.SlobodaNemaCenu.Web.Models.Generated;
+@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockListItem>
+@{
+    var item = Model.Content as ContentModels.ImageAndTextV2;
+}
+
+<section class="image-text-box @(item.Flip ? "reverse" : string.Empty)">
+    <div class="wrap">
+        <div class="image-text-box__wrap">
+            <div class="image-text-box__image">
+                <img src="@item.Image?.GetCropUrl()" alt="Image exemple" />
+            </div>
+            <div class="image-text-box__content">
+                <h4 class="h4">@item.Title</h4>
+                <p class="text-small">
+                   @item.Description
+                </p>
+                <div class="image-box__comment">
+                    <span>@item.ShortText</span>
+                    <div class="triangle-comment">
+                        <span class="sr-only">Triangle shape</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/blocklist/Components/imageBox.cshtml b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/blocklist/Components/imageBox.cshtml
new file mode 100644
index 0000000..92fa4b1
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/blocklist/Components/imageBox.cshtml
@@ -0,0 +1,22 @@
+@using ContentModels = Hakaton.SlobodaNemaCenu.Web.Models.Generated;
+@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockListItem>
+@{
+    var item = Model.Content as ContentModels.ImageBox;
+}
+
+@if (item.Image is null)
+{
+    return;
+}
+
+<section class="image-box no-border">
+    <div class="wrap">
+        <div class="image-box__wrap">
+            <div class="image-box__img">
+                <a href="@item.Link?.Url" class="image-box__link">
+                    <img src="@item.Image?.GetCropUrl()" alt="Image exemple" />
+                </a>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/blocklist/Components/smallBanner.cshtml b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/blocklist/Components/smallBanner.cshtml
index 6a48eb4..17f5028 100644
--- a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/blocklist/Components/smallBanner.cshtml
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/Views/Partials/blocklist/Components/smallBanner.cshtml
@@ -29,10 +29,10 @@
             </div>
 
             <div class="image-box__comment">
-                <span class="grey">Sloboda Nema Cenu,</span>
-                <span>KC Liman</span>
+                <span class="grey">@item.BoxComment</span>
+                <span>@item.Comment</span>
                 <div class="triangle-comment">
-                    <span class="sr-only">Triangle shape</span>
+                    <span class="sr-only">@item.TriangleComment</span>
                 </div>
             </div>
         </div>
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/fonts/svgicons.svg b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/fonts/svgicons.svg
index 0024a71..4249d05 100644
--- a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/fonts/svgicons.svg
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/fonts/svgicons.svg
@@ -13,26 +13,44 @@
     <glyph glyph-name="arrow-1"
       unicode="&#x61;&#x72;&#x72;&#x6F;&#x77;"
       horiz-adv-x="32" d="M23.4791529411765 20.2359510588235L31.6250352941176 12.1022682352941C32.1249882352941 11.6031435294118 32.1249882352941 10.7939011764706 31.6250352941176 10.2947952941176L23.4791529411765 2.1611105882353C22.9793882352941 1.6619294117647 22.1688470588235 1.6619294117647 21.6690823529412 2.1611105882353C21.1691294117647 2.6602352941176 21.1691294117647 3.4694776470588 21.6690823529412 3.9685835294118L27.6297411764706 9.9204517647059L0 9.9204517647059L0 12.4766117647059L27.6297411764706 12.4766117647059L21.6690823529412 18.4284611764706C21.1691294117647 18.9275896470588 21.1691294117647 19.7368282352941 21.6690823529412 20.2359510588235C22.1688470588235 20.7350748235294 22.9793882352941 20.7350748235294 23.4791529411765 20.2359510588235z" />
-    <glyph glyph-name="facebook"
+    <glyph glyph-name="download"
       unicode="&#xF102;"
+      horiz-adv-x="32" d="M20.8 19.2V28.8H11.2V19.2H3.2L16 6.4L28.8 19.2H20.8zM0 3.2H32V0H0V3.2z" />
+    <glyph glyph-name="download-1"
+      unicode="&#x64;&#x6F;&#x77;&#x6E;&#x6C;&#x6F;&#x61;&#x64;"
+      horiz-adv-x="32" d="M20.8 19.2V28.8H11.2V19.2H3.2L16 6.4L28.8 19.2H20.8zM0 3.2H32V0H0V3.2z" />
+    <glyph glyph-name="dropdown"
+      unicode="&#xF103;"
+      horiz-adv-x="32" d="M16 1.1501866666667L2.1435982222222 18.0913528888889L29.8563911111111 18.0913493333333L16 1.1501866666667z" />
+    <glyph glyph-name="dropdown-1"
+      unicode="&#x64;&#x72;&#x6F;&#x70;&#x64;&#x6F;&#x77;&#x6E;"
+      horiz-adv-x="32" d="M16 1.1501866666667L2.1435982222222 18.0913528888889L29.8563911111111 18.0913493333333L16 1.1501866666667z" />
+    <glyph glyph-name="facebook"
+      unicode="&#xF104;"
       horiz-adv-x="32" d="M19 26H24V32H19C15.14 32 12 28.86 12 25V22H8V16H12V0H18V16H23L24 22H18V25C18 25.542 18.458 26 19 26z" />
     <glyph glyph-name="facebook-1"
       unicode="&#x66;&#x61;&#x63;&#x65;&#x62;&#x6F;&#x6F;&#x6B;"
       horiz-adv-x="32" d="M19 26H24V32H19C15.14 32 12 28.86 12 25V22H8V16H12V0H18V16H23L24 22H18V25C18 25.542 18.458 26 19 26z" />
     <glyph glyph-name="instagram"
-      unicode="&#xF103;"
+      unicode="&#xF105;"
       horiz-adv-x="32" d="M9.3333333333333 30.6666666666667C7.124 30.6666666666667 5.1226666666667 29.7693333333333 3.676 28.324S1.3333333333333 24.876 1.3333333333333 22.6666666666667V9.3333333333333C1.3333333333333 7.124 2.2306666666667 5.1226666666667 3.676 3.676S7.124 1.3333333333333 9.3333333333333 1.3333333333333H22.6666666666667C24.876 1.3333333333333 26.8773333333333 2.2306666666667 28.324 3.676S30.6666666666667 7.124 30.6666666666667 9.3333333333333V22.6666666666667C30.6666666666667 24.876 29.7693333333333 26.8773333333333 28.324 28.324S24.876 30.6666666666667 22.6666666666667 30.6666666666667zM9.3333333333333 28H22.6666666666667C24.14 28 25.4706666666667 27.404 26.4373333333333 26.4373333333333S28 24.14 28 22.6666666666667V9.3333333333333C28 7.86 27.404 6.5293333333333 26.4373333333333 5.5626666666667S24.14 4 22.6666666666667 4H9.3333333333333C7.86 4 6.5293333333333 4.596 5.5626666666667 5.5626666666667S4 7.86 4 9.3333333333333V22.6666666666667C4 24.14 4.596 25.4706666666667 5.5626666666667 26.4373333333333S7.86 28 9.3333333333333 28zM22.652 17.036C22.452 18.332 21.8906666666667 19.512 21.06 20.4586666666667C20.0546666666667 21.6066666666667 18.6546666666667 22.412 17.048 22.6506666666667C16.4293333333333 22.7493333333333 15.7546666666667 22.7533333333333 15.0786666666667 22.6533333333333C13.2573333333333 22.384 11.7173333333333 21.3986666666667 10.7026666666667 20.0306666666667S9.192 16.9013333333333 9.4626666666667 15.0813333333333S10.7173333333333 11.72 12.0853333333333 10.7053333333333S15.2146666666667 9.1946666666667 17.0346666666667 9.4653333333333S20.396 10.72 21.4106666666667 12.088S22.9213333333333 15.2173333333333 22.6506666666667 17.0373333333333zM20.0146666666667 16.644C20.1773333333333 15.5506666666667 19.8813333333333 14.4986666666667 19.2706666666667 13.6746666666667S17.7373333333333 12.2626666666667 16.6453333333333 12.1013333333333S14.5 12.2346666666667 13.676 12.8453333333333S12.264 14.3786666666667 12.1026666666667 15.4706666666667S12.236 17.616 12.8466666666667 18.44S14.38 19.852 15.472 20.0133333333333C15.8893333333333 20.0746666666667 16.292 20.0693333333333 16.632 20.016C17.6186666666667 19.8693333333333 18.4533333333333 19.3893333333333 19.056 18.7013333333333C19.556 18.1306666666667 19.896 17.4173333333333 20.016 16.644zM23.3333333333333 22C24.0693333333333 22 24.6666666666667 22.5973333333333 24.6666666666667 23.3333333333333S24.0693333333333 24.6666666666667 23.3333333333333 24.6666666666667S22 24.0693333333333 22 23.3333333333333S22.5973333333333 22 23.3333333333333 22z" />
     <glyph glyph-name="instagram-1"
       unicode="&#x69;&#x6E;&#x73;&#x74;&#x61;&#x67;&#x72;&#x61;&#x6D;"
       horiz-adv-x="32" d="M9.3333333333333 30.6666666666667C7.124 30.6666666666667 5.1226666666667 29.7693333333333 3.676 28.324S1.3333333333333 24.876 1.3333333333333 22.6666666666667V9.3333333333333C1.3333333333333 7.124 2.2306666666667 5.1226666666667 3.676 3.676S7.124 1.3333333333333 9.3333333333333 1.3333333333333H22.6666666666667C24.876 1.3333333333333 26.8773333333333 2.2306666666667 28.324 3.676S30.6666666666667 7.124 30.6666666666667 9.3333333333333V22.6666666666667C30.6666666666667 24.876 29.7693333333333 26.8773333333333 28.324 28.324S24.876 30.6666666666667 22.6666666666667 30.6666666666667zM9.3333333333333 28H22.6666666666667C24.14 28 25.4706666666667 27.404 26.4373333333333 26.4373333333333S28 24.14 28 22.6666666666667V9.3333333333333C28 7.86 27.404 6.5293333333333 26.4373333333333 5.5626666666667S24.14 4 22.6666666666667 4H9.3333333333333C7.86 4 6.5293333333333 4.596 5.5626666666667 5.5626666666667S4 7.86 4 9.3333333333333V22.6666666666667C4 24.14 4.596 25.4706666666667 5.5626666666667 26.4373333333333S7.86 28 9.3333333333333 28zM22.652 17.036C22.452 18.332 21.8906666666667 19.512 21.06 20.4586666666667C20.0546666666667 21.6066666666667 18.6546666666667 22.412 17.048 22.6506666666667C16.4293333333333 22.7493333333333 15.7546666666667 22.7533333333333 15.0786666666667 22.6533333333333C13.2573333333333 22.384 11.7173333333333 21.3986666666667 10.7026666666667 20.0306666666667S9.192 16.9013333333333 9.4626666666667 15.0813333333333S10.7173333333333 11.72 12.0853333333333 10.7053333333333S15.2146666666667 9.1946666666667 17.0346666666667 9.4653333333333S20.396 10.72 21.4106666666667 12.088S22.9213333333333 15.2173333333333 22.6506666666667 17.0373333333333zM20.0146666666667 16.644C20.1773333333333 15.5506666666667 19.8813333333333 14.4986666666667 19.2706666666667 13.6746666666667S17.7373333333333 12.2626666666667 16.6453333333333 12.1013333333333S14.5 12.2346666666667 13.676 12.8453333333333S12.264 14.3786666666667 12.1026666666667 15.4706666666667S12.236 17.616 12.8466666666667 18.44S14.38 19.852 15.472 20.0133333333333C15.8893333333333 20.0746666666667 16.292 20.0693333333333 16.632 20.016C17.6186666666667 19.8693333333333 18.4533333333333 19.3893333333333 19.056 18.7013333333333C19.556 18.1306666666667 19.896 17.4173333333333 20.016 16.644zM23.3333333333333 22C24.0693333333333 22 24.6666666666667 22.5973333333333 24.6666666666667 23.3333333333333S24.0693333333333 24.6666666666667 23.3333333333333 24.6666666666667S22 24.0693333333333 22 23.3333333333333S22.5973333333333 22 23.3333333333333 22z" />
     <glyph glyph-name="linkedin"
-      unicode="&#xF104;"
+      unicode="&#xF106;"
       horiz-adv-x="27.428571428571427" d="M6.232 20.8388571428571V3.1428571428571H0.3394285714286V20.8388571428571H6.232zM6.6068571428571 26.304C6.6251428571429 24.608 5.3394285714286 23.2502857142857 3.2857142857143 23.2502857142857V23.2502857142857H3.2502857142857C1.2685714285714 23.2502857142857 0 24.608 0 26.304C0 28.0365714285714 1.3211428571429 29.3577142857143 3.3211428571429 29.3577142857143C5.3394285714286 29.3577142857143 6.5885714285714 28.0365714285714 6.6068571428571 26.304zM27.4285714285714 13.2857142857143V3.1428571428571H21.5531428571429V12.6068571428571C21.5531428571429 14.9817142857143 20.696 16.6068571428571 18.5714285714286 16.6068571428571C16.9462857142857 16.6068571428571 15.9817142857143 15.5177142857143 15.5531428571429 14.464C15.4102857142857 14.0708571428571 15.3565714285714 13.5531428571429 15.3565714285714 13.0171428571429V3.1417142857143H9.4811428571429C9.5531428571429 19.1771428571429 9.4811428571429 20.8377142857143 9.4811428571429 20.8377142857143H15.3565714285714V18.2662857142857H15.3211428571429C16.0891428571429 19.48 17.4822857142857 21.248 20.6605714285714 21.248C24.536 21.248 27.4285714285714 18.712 27.4285714285714 13.2834285714286z" />
     <glyph glyph-name="linkedin-1"
       unicode="&#x6C;&#x69;&#x6E;&#x6B;&#x65;&#x64;&#x69;&#x6E;"
       horiz-adv-x="27.428571428571427" d="M6.232 20.8388571428571V3.1428571428571H0.3394285714286V20.8388571428571H6.232zM6.6068571428571 26.304C6.6251428571429 24.608 5.3394285714286 23.2502857142857 3.2857142857143 23.2502857142857V23.2502857142857H3.2502857142857C1.2685714285714 23.2502857142857 0 24.608 0 26.304C0 28.0365714285714 1.3211428571429 29.3577142857143 3.3211428571429 29.3577142857143C5.3394285714286 29.3577142857143 6.5885714285714 28.0365714285714 6.6068571428571 26.304zM27.4285714285714 13.2857142857143V3.1428571428571H21.5531428571429V12.6068571428571C21.5531428571429 14.9817142857143 20.696 16.6068571428571 18.5714285714286 16.6068571428571C16.9462857142857 16.6068571428571 15.9817142857143 15.5177142857143 15.5531428571429 14.464C15.4102857142857 14.0708571428571 15.3565714285714 13.5531428571429 15.3565714285714 13.0171428571429V3.1417142857143H9.4811428571429C9.5531428571429 19.1771428571429 9.4811428571429 20.8377142857143 9.4811428571429 20.8377142857143H15.3565714285714V18.2662857142857H15.3211428571429C16.0891428571429 19.48 17.4822857142857 21.248 20.6605714285714 21.248C24.536 21.248 27.4285714285714 18.712 27.4285714285714 13.2834285714286z" />
+    <glyph glyph-name="share"
+      unicode="&#xF107;"
+      horiz-adv-x="32" d="M16 30.6666666666667L10.6666666666667 25.3333333333333H14.6666666666667V13.3333333333333H17.3333333333333V25.3333333333333H21.3333333333333M24 1.3333333333333H8C6.52 1.3333333333333 5.3333333333333 2.5333333333333 5.3333333333333 4V20A2.6666666666667 2.6666666666667 0 0 0 8 22.6666666666667H12V20H8V4H24V20H20V22.6666666666667H24A2.6666666666667 2.6666666666667 0 0 0 26.6666666666667 20V4A2.6666666666667 2.6666666666667 0 0 0 24 1.3333333333333z" />
+    <glyph glyph-name="share-1"
+      unicode="&#x73;&#x68;&#x61;&#x72;&#x65;"
+      horiz-adv-x="32" d="M16 30.6666666666667L10.6666666666667 25.3333333333333H14.6666666666667V13.3333333333333H17.3333333333333V25.3333333333333H21.3333333333333M24 1.3333333333333H8C6.52 1.3333333333333 5.3333333333333 2.5333333333333 5.3333333333333 4V20A2.6666666666667 2.6666666666667 0 0 0 8 22.6666666666667H12V20H8V4H24V20H20V22.6666666666667H24A2.6666666666667 2.6666666666667 0 0 0 26.6666666666667 20V4A2.6666666666667 2.6666666666667 0 0 0 24 1.3333333333333z" />
     <glyph glyph-name="twitter"
-      unicode="&#xF105;"
+      unicode="&#xF108;"
       horiz-adv-x="32" d="M32 24.925C30.825 24.4 29.556 24.05 28.231 23.894C29.587 24.707 30.625 25.994 31.118 27.525C29.849 26.775 28.443 26.225 26.949 25.931C25.749 27.206 24.043 28 22.155 28C18.53 28 15.592 25.062 15.592 21.437C15.592 20.925 15.648 20.425 15.761 19.943C10.305 20.218 5.467 22.831 2.23 26.805C1.667 25.836 1.343 24.705 1.343 23.505C1.343 21.23 2.499 19.218 4.262 18.042C3.187 18.073 2.175 18.373 1.287 18.861C1.287 18.836 1.287 18.805 1.287 18.78C1.287 15.599 3.55 12.942 6.556 12.343C6.006 12.193 5.425 12.112 4.825 12.112C4.4 12.112 3.994 12.156 3.588 12.231C4.426 9.625 6.851 7.725 9.719 7.668C7.469 5.906 4.644 4.855 1.563 4.855C1.032 4.855 0.513 4.886 -0.006 4.949C2.907 3.08 6.356 1.999 10.063 1.999C22.138 1.999 28.744 12.005 28.744 20.68C28.744 20.967 28.738 21.249 28.725 21.53C30.006 22.449 31.119 23.605 32 24.924z" />
     <glyph glyph-name="twitter-1"
       unicode="&#x74;&#x77;&#x69;&#x74;&#x74;&#x65;&#x72;"
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/fonts/svgicons.ttf b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/fonts/svgicons.ttf
index 2747bdf..be58d4f 100644
Binary files a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/fonts/svgicons.ttf and b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/fonts/svgicons.ttf differ
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/fonts/svgicons.woff b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/fonts/svgicons.woff
index 2969693..01ba43f 100644
Binary files a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/fonts/svgicons.woff and b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/fonts/svgicons.woff differ
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/fonts/svgicons.woff2 b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/fonts/svgicons.woff2
index e1da1f0..7c21bb5 100644
Binary files a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/fonts/svgicons.woff2 and b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/fonts/svgicons.woff2 differ
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/images/state.svg b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/images/state.svg
new file mode 100644
index 0000000..72fd4aa
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/images/state.svg
@@ -0,0 +1,56 @@
+<svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_90_5159)">
+<g clip-path="url(#clip0_90_5159)">
+<path d="M2 14.3335H31.9999V20.4738C31.9999 20.7644 31.7683 21.0001 31.4827 21.0001H2.51726C2.23162 21.0001 2 20.7644 2 20.4738V14.3335Z" fill="white"/>
+<path d="M2.51726 1H31.4827C31.7684 1 32 1.23568 32 1.52634V7.6666H2V1.52628C2 1.23562 2.23162 1 2.51726 1Z" fill="#FF4B55"/>
+<path d="M31.9999 7.6665H2V14.3327H31.9999V7.6665Z" fill="#41479B"/>
+<path d="M12.1381 7.66515H8.41394L8.25879 6.71777H12.2933L12.1381 7.66515Z" fill="#FFE15A"/>
+<path d="M8.375 7.42822L8.41379 7.6651H12.1379L12.1767 7.42822H8.375Z" fill="#FFD350"/>
+<path d="M10.353 4.50732H10.1982V5.13889H10.353V4.50732Z" fill="#FFE15A"/>
+<path d="M10.5085 4.66553H10.043V4.8234H10.5085V4.66553Z" fill="#FFE15A"/>
+<path d="M12.15 7.03398C12.1324 7.03398 12.1146 7.03088 12.0971 7.02456C12.0165 6.99481 11.9749 6.9043 12.0041 6.82227L12.3328 5.89927C12.3491 5.85348 12.3453 5.8031 12.3223 5.76101C12.31 5.73865 12.2816 5.6993 12.2271 5.68744C11.8264 5.60081 11.0496 5.45509 10.3508 5.45509H10.2009C9.50206 5.45509 8.72528 5.60081 8.32438 5.68761C8.27013 5.6993 8.24153 5.73865 8.22935 5.76101C8.20638 5.8031 8.20251 5.85348 8.21886 5.89927L8.54745 6.82227C8.57669 6.9043 8.53503 6.99481 8.45446 7.02456C8.37395 7.05383 8.28483 7.01174 8.25571 6.92988L7.927 6.00689C7.88013 5.87518 7.89132 5.72977 7.95782 5.60778C8.0221 5.48985 8.13202 5.40626 8.25952 5.37866C8.67243 5.28923 9.47346 5.13916 10.2008 5.13916H10.3507C11.078 5.13916 11.879 5.28917 12.2918 5.37842C12.4194 5.4062 12.5294 5.48973 12.5936 5.60772C12.6601 5.72971 12.6713 5.87506 12.6245 6.00683L12.2957 6.92982C12.2731 6.99409 12.2134 7.03398 12.15 7.03398Z" fill="#FFE15A"/>
+<path d="M10.2763 6.8955C10.1906 6.8955 10.1211 6.82491 10.1211 6.73762V5.45475C10.1211 5.36747 10.1906 5.29688 10.2763 5.29688C10.3619 5.29688 10.4314 5.36747 10.4314 5.45475V6.73762C10.4315 6.82485 10.362 6.8955 10.2763 6.8955Z" fill="#FFE15A"/>
+<path d="M11.349 7.03392C11.3386 7.03392 11.328 7.03285 11.3173 7.0307C11.2334 7.01293 11.1795 6.9294 11.1969 6.84397L11.3851 5.92097C11.4096 5.80072 11.3713 5.69537 11.3495 5.67688C11.1344 5.59657 10.7027 5.45497 10.3186 5.45497H10.2328C9.84875 5.45497 9.41709 5.59657 9.19391 5.681C9.18014 5.69537 9.14182 5.80066 9.16625 5.92091L9.35446 6.84391C9.37192 6.92929 9.31801 7.01293 9.23405 7.03064C9.15002 7.04716 9.06788 6.9935 9.05065 6.90806L8.86245 5.98507C8.81557 5.75499 8.88752 5.46034 9.08557 5.3851C9.38223 5.27289 9.8218 5.13916 10.2327 5.13916H10.3186C10.7295 5.13916 11.1691 5.27283 11.4656 5.38492C11.6638 5.46034 11.7358 5.75499 11.6889 5.98507L11.5007 6.90806C11.4856 6.98277 11.421 7.03392 11.349 7.03392Z" fill="#FFE15A"/>
+<path d="M8.29758 6.95459H12.2545L12.2933 6.71777H8.25879L8.29758 6.95459Z" fill="#FFD350"/>
+<path d="M7.32801 7.66553C7.24234 7.66553 7.17285 7.73624 7.17285 7.8234V13.3375C7.17285 15.0883 8.56228 16.5076 10.2763 16.5076C11.9904 16.5076 13.3798 15.0883 13.3798 13.3375V7.8234C13.3798 7.73624 13.3103 7.66553 13.2246 7.66553H7.32801Z" fill="#FF4B55"/>
+<path d="M10.5869 12.8759L10.8973 12.0864L10.2766 12.2443L9.6559 12.0864L9.96627 12.8759L9.19043 15.5601C9.19043 15.5601 9.65596 15.8759 10.2766 15.8759C10.8973 15.8759 11.3628 15.5601 11.3628 15.5601L10.5869 12.8759Z" fill="white"/>
+<path d="M9.15211 13.5118L8.8783 13.5815L9.48058 12.4785L9.20929 12.3252L8.47775 13.665H7.7932V13.9808H8.1266L7.69629 14.3311L7.89012 14.5778L8.25568 14.2802L8.11148 14.7203L8.40592 14.8202L8.68933 13.955L9.2274 13.8181L9.15211 13.5118Z" fill="#FFE15A"/>
+<path d="M9.18931 9.24442L8.48097 8.88401C8.3509 8.81783 8.2834 8.66854 8.31867 8.52497L8.35875 8.3619C8.38652 8.24874 8.30244 8.13916 8.18777 8.13916C8.13422 8.13916 8.08359 8.1639 8.05019 8.20647C7.68264 8.67396 7.48242 9.25479 7.48242 9.85351V13.1918C7.48242 13.1918 8.13041 13.0599 8.7157 12.1936C8.82316 12.0345 9.00006 11.9404 9.18867 11.9305L8.87894 12.8759L9.49968 13.0339L10.0428 12.3763L9.18931 9.24442Z" fill="white"/>
+<path d="M11.3998 13.5118L11.6736 13.5815L11.0713 12.4785L11.3426 12.3252L12.0741 13.665H12.7587V13.9808H12.4252L12.8556 14.3311L12.6618 14.5778L12.2962 14.2802L12.4404 14.7203L12.1459 14.8202L11.8625 13.955L11.3245 13.8181L11.3998 13.5118Z" fill="#FFE15A"/>
+<path d="M11.3622 9.24442L12.0705 8.88401C12.2006 8.81783 12.2681 8.66854 12.2328 8.52497L12.1928 8.3619C12.165 8.24874 12.2491 8.13916 12.3637 8.13916C12.4173 8.13916 12.4679 8.1639 12.5013 8.20647C12.8689 8.67396 13.0691 9.25479 13.0691 9.85351V13.1918C13.0691 13.1918 12.4211 13.0599 11.8358 12.1936C11.7284 12.0345 11.5515 11.9404 11.3628 11.9305L11.6726 12.8759L11.0519 13.0338L10.5088 12.3762L11.3622 9.24442Z" fill="white"/>
+<path d="M9.34523 8.13916H8.56934L8.80213 8.45497L9.34523 8.61285L9.03486 8.77073H9.50039L9.34523 8.13916Z" fill="#FFE15A"/>
+<path d="M11.2069 8.13916H11.9828L11.75 8.45497L11.2069 8.61285L11.5173 8.77073H11.0518L11.2069 8.13916Z" fill="#FFE15A"/>
+<path d="M11.316 8.0152L10.5861 8.13897L10.2757 8.77054L9.96532 8.13897L9.23536 8.0152C9.15169 8.00101 9.08747 8.08942 9.12544 8.16663L9.49985 8.92847L9.18948 9.24429H10.2757H11.3619L11.0515 8.92847L11.4259 8.16663C11.4639 8.08936 11.3997 8.00095 11.316 8.0152Z" fill="white"/>
+<path d="M10.2757 7.02392C10.4042 7.02392 10.5084 6.9179 10.5084 6.78711C10.5084 6.65632 10.4042 6.55029 10.2757 6.55029C10.1472 6.55029 10.043 6.65632 10.043 6.78711C10.043 6.9179 10.1472 7.02392 10.2757 7.02392Z" fill="#FFBE50"/>
+<path d="M10.2728 7.48387C10.3744 7.48387 10.4567 7.42496 10.4567 7.35229C10.4567 7.27962 10.3744 7.2207 10.2728 7.2207C10.1712 7.2207 10.0889 7.27962 10.0889 7.35229C10.0889 7.42496 10.1712 7.48387 10.2728 7.48387Z" fill="#41479B"/>
+<path d="M9.35482 7.48387C9.4564 7.48387 9.53875 7.42496 9.53875 7.35229C9.53875 7.27962 9.4564 7.2207 9.35482 7.2207C9.25324 7.2207 9.1709 7.27962 9.1709 7.35229C9.1709 7.42496 9.25324 7.48387 9.35482 7.48387Z" fill="#FF4B55"/>
+<path d="M8.43686 7.48387C8.53843 7.48387 8.62078 7.42496 8.62078 7.35229C8.62078 7.27962 8.53843 7.2207 8.43686 7.2207C8.33528 7.2207 8.25293 7.27962 8.25293 7.35229C8.25293 7.42496 8.33528 7.48387 8.43686 7.48387Z" fill="#41479B"/>
+<path d="M12.1097 7.48387C12.2113 7.48387 12.2936 7.42496 12.2936 7.35229C12.2936 7.27962 12.2113 7.2207 12.1097 7.2207C12.0081 7.2207 11.9258 7.27962 11.9258 7.35229C11.9258 7.42496 12.0081 7.48387 12.1097 7.48387Z" fill="#41479B"/>
+<path d="M11.1908 7.48387C11.2923 7.48387 11.3747 7.42496 11.3747 7.35229C11.3747 7.27962 11.2923 7.2207 11.1908 7.2207C11.0892 7.2207 11.0068 7.27962 11.0068 7.35229C11.0068 7.42496 11.0892 7.48387 11.1908 7.48387Z" fill="#FF4B55"/>
+<path d="M11.3529 7.02392C11.4814 7.02392 11.5856 6.9179 11.5856 6.78711C11.5856 6.65632 11.4814 6.55029 11.3529 6.55029C11.2243 6.55029 11.1201 6.65632 11.1201 6.78711C11.1201 6.9179 11.2243 7.02392 11.3529 7.02392Z" fill="#FFBE50"/>
+<path d="M12.2034 7.02392C12.332 7.02392 12.4362 6.9179 12.4362 6.78711C12.4362 6.65632 12.332 6.55029 12.2034 6.55029C12.0749 6.55029 11.9707 6.65632 11.9707 6.78711C11.9707 6.9179 12.0749 7.02392 12.2034 7.02392Z" fill="#FFBE50"/>
+<path d="M9.19758 7.02392C9.32611 7.02392 9.43031 6.9179 9.43031 6.78711C9.43031 6.65632 9.32611 6.55029 9.19758 6.55029C9.06904 6.55029 8.96484 6.65632 8.96484 6.78711C8.96484 6.9179 9.06904 7.02392 9.19758 7.02392Z" fill="#FFBE50"/>
+<path d="M8.34601 7.02392C8.47455 7.02392 8.57875 6.9179 8.57875 6.78711C8.57875 6.65632 8.47455 6.55029 8.34601 6.55029C8.21748 6.55029 8.11328 6.65632 8.11328 6.78711C8.11328 6.9179 8.21748 7.02392 8.34601 7.02392Z" fill="#FFBE50"/>
+<path d="M10.5425 5.45514C10.5692 5.40857 10.5856 5.35509 10.5856 5.29726C10.5856 5.12287 10.4467 4.98145 10.2752 4.98145C10.1038 4.98145 9.96484 5.12281 9.96484 5.29726C9.96484 5.35509 9.98119 5.40857 10.0079 5.45514H10.5425Z" fill="#41479B"/>
+<path d="M10.2761 12.4813C9.63432 12.4813 9.1123 11.9501 9.1123 11.2971V9.16553H11.4399V11.2971C11.4399 11.9502 10.9179 12.4813 10.2761 12.4813Z" fill="#FF4B55"/>
+<path d="M11.3627 9.2443V11.2969C11.3627 11.9073 10.8763 12.4022 10.2765 12.4022C9.67658 12.4022 9.19025 11.9073 9.19025 11.2969V9.2443H11.3627ZM11.5179 9.08643H11.3627H9.19031H9.03516V9.2443V11.2969C9.03516 11.9934 9.59203 12.5601 10.2765 12.5601C10.961 12.5601 11.5179 11.9934 11.5179 11.2969V9.2443V9.08643Z" fill="#A54B50"/>
+<path d="M10.044 12.376C10.1191 12.3927 10.1968 12.402 10.2767 12.402C10.3567 12.402 10.4344 12.3926 10.5095 12.376V9.24414H10.0439C10.044 9.24414 10.044 12.376 10.044 12.376Z" fill="white"/>
+<path d="M11.3631 10.5469H9.19043V11.0206H11.3631V10.5469Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_90_5159" x="0" y="0" width="34" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_90_5159"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_90_5159" result="shape"/>
+</filter>
+<clipPath id="clip0_90_5159">
+<rect x="2" y="1" width="30" height="20" rx="1" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/svg/download.svg b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/svg/download.svg
new file mode 100644
index 0000000..f7c6f89
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/svg/download.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+<title>download</title>
+<path d="M13 8v-6h-6v6h-5l8 8 8-8h-5zM0 18h20v2h-20v-2z"></path>
+</svg>
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/svg/dropdown.svg b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/svg/dropdown.svg
new file mode 100644
index 0000000..5e4ddc1
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/svg/dropdown.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 5.67651L0.602887 0.911807L8.39711 0.911808L4.5 5.67651Z" fill="#49B4D6"/>
+</svg>
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/svg/share.svg b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/svg/share.svg
new file mode 100644
index 0000000..8d9791d
--- /dev/null
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/assets/svg/share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,1L8,5H11V14H13V5H16M18,23H6C4.89,23 4,22.1 4,21V9A2,2 0 0,1 6,7H9V9H6V21H18V9H15V7H18A2,2 0 0,1 20,9V21A2,2 0 0,1 18,23Z" /></svg>
\ No newline at end of file
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/css/style.css b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/css/style.css
index f3f39a9..493798a 100644
--- a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/css/style.css
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/css/style.css
@@ -144,7 +144,7 @@ table {
 @font-face {
   font-family: "svgicons";
   font-display: block;
-  src: url("../assets/fonts/svgicons.woff2?f6254b4f772261bc1e5f9f18b682d76c") format("woff2"), url("../assets/fonts/svgicons.woff?f6254b4f772261bc1e5f9f18b682d76c") format("woff"), url("../assets/fonts/svgicons.svg?f6254b4f772261bc1e5f9f18b682d76c#svgicons") format("svg");
+  src: url("../assets/fonts/svgicons.woff2?ea7b42ea431ad2475cebe51390efb192") format("woff2"), url("../assets/fonts/svgicons.woff?ea7b42ea431ad2475cebe51390efb192") format("woff"), url("../assets/fonts/svgicons.svg?ea7b42ea431ad2475cebe51390efb192#svgicons") format("svg");
 }
 .icon {
   line-height: 1;
@@ -161,22 +161,34 @@ table {
   content: "\f101";
 }
 
-.icon-facebook:before {
+.icon-download:before {
   content: "\f102";
 }
 
-.icon-instagram:before {
+.icon-dropdown:before {
   content: "\f103";
 }
 
-.icon-linkedin:before {
+.icon-facebook:before {
   content: "\f104";
 }
 
-.icon-twitter:before {
+.icon-instagram:before {
   content: "\f105";
 }
 
+.icon-linkedin:before {
+  content: "\f106";
+}
+
+.icon-share:before {
+  content: "\f107";
+}
+
+.icon-twitter:before {
+  content: "\f108";
+}
+
 * {
   box-sizing: border-box;
 }
@@ -277,18 +289,39 @@ body {
   font-weight: 700;
   margin-bottom: 15px;
 }
+@media only screen and (max-width: 1023.98px) {
+  .rte h1,
+  .h1 {
+    font-size: 32px;
+    margin-bottom: 12px;
+  }
+}
 
 .rte h2,
 .h2 {
   font-size: 40px;
   margin-bottom: 20px;
 }
+@media only screen and (max-width: 767.98px) {
+  .rte h2,
+  .h2 {
+    font-size: 24px;
+    margin-bottom: 12px;
+  }
+}
 
 .rte h3,
 .h3 {
   font-size: 24px;
   margin-bottom: 15px;
 }
+@media only screen and (max-width: 767.98px) {
+  .rte h3,
+  .h3 {
+    font-size: 20px;
+    margin-bottom: 12px;
+  }
+}
 
 .rte h4,
 .h4 {
@@ -322,10 +355,11 @@ body {
 
 .rte {
   max-width: 793px;
+  padding: 0 20px;
   margin: 0 auto 64px;
 }
 .rte img {
-  border-radius: 0px 20px 20px 0px;
+  border-radius: 0 20px 20px 0;
   width: 100%;
   margin-bottom: 32px;
 }
@@ -945,6 +979,11 @@ button.swiper-pagination-bullet {
   display: flex;
   margin-bottom: 23px;
 }
+@media only screen and (max-width: 1023.98px) {
+  .icons {
+    justify-content: center;
+  }
+}
 
 .icon-link {
   display: inline-block;
@@ -976,11 +1015,36 @@ button.swiper-pagination-bullet {
   color: #fff;
   border-top: 6px solid #49b4d6;
 }
+@media only screen and (max-width: 1023.98px) {
+  .header {
+    position: relative;
+    z-index: 10;
+  }
+}
 
 .header__container {
   display: flex;
   align-items: center;
 }
+@media only screen and (max-width: 1023.98px) {
+  .header__container.active .nav {
+    display: block;
+  }
+  .header__container.active .mobile-menu::before {
+    transform: translateY(8px) rotate(135deg);
+  }
+  .header__container.active .mobile-menu::after {
+    transform: translateY(-10px) rotate(-135deg);
+  }
+  .header__container.active .mobile-menu div {
+    transform: scale(0);
+  }
+}
+
+.logo {
+  position: relative;
+  z-index: 2;
+}
 
 .logo__img {
   display: block;
@@ -989,21 +1053,67 @@ button.swiper-pagination-bullet {
 
 .header-action {
   margin-left: auto;
+  display: flex;
+  align-items: center;
+}
+@media only screen and (max-width: 1023.98px) {
+  .header-action .header-btn {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 1023.98px) {
+  .nav {
+    display: none;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: #0c3c63;
+    border-top: 6px solid #49b4d6;
+    text-align: center;
+  }
+}
+.nav .header-btn {
+  display: none;
+}
+@media only screen and (max-width: 1023.98px) {
+  .nav .header-btn {
+    display: inline-block;
+  }
 }
 
 .nav__list {
   display: flex;
 }
+@media only screen and (max-width: 1023.98px) {
+  .nav__list {
+    flex-direction: column;
+    text-align: center;
+    margin-top: 108px;
+  }
+}
 
 .nav__item {
   font-size: 14px;
   font-weight: 500;
   margin-left: 24px;
 }
+@media only screen and (max-width: 1023.98px) {
+  .nav__item {
+    margin-left: 0;
+  }
+}
 .nav__item.active .nav__link {
   color: #49b4d6;
   font-weight: 600;
 }
+@media only screen and (max-width: 1023.98px) {
+  .nav__item {
+    margin-bottom: 31px;
+  }
+}
 
 .nav__link {
   display: block;
@@ -1029,14 +1139,48 @@ button.swiper-pagination-bullet {
   margin: 7px 0;
   transition: 0.4s ease-out;
 }
-.mobile-menu:hover::before {
-  transform: translateY(8px) rotate(135deg);
+@media only screen and (max-width: 1023.98px) {
+  .mobile-menu {
+    display: block;
+  }
 }
-.mobile-menu:hover::after {
-  transform: translateY(-10px) rotate(-135deg);
+
+.language-dropdown {
+  position: relative;
 }
-.mobile-menu:hover div {
-  transform: scale(0);
+.language-dropdown.is-active .checkbox-dropdown-list {
+  opacity: 1;
+  pointer-events: auto;
+}
+.language-dropdown .btn {
+  border: none;
+  padding: 12px;
+  margin-right: 20px;
+}
+.language-dropdown .btn.is-active ~ .checkbox-dropdown-list {
+  opacity: 1;
+  pointer-events: auto;
+}
+.language-dropdown .btn .icon {
+  font-size: 9px;
+  margin-right: 8px;
+  position: relative;
+  top: 4px;
+}
+@media (hover: hover) and (pointer: fine) {
+  .language-dropdown .btn:hover {
+    background-color: transparent;
+  }
+}
+.language-dropdown .btn img {
+  width: 30px;
+}
+.language-dropdown .checkbox-dropdown-list {
+  width: 60px;
+}
+.language-dropdown .checkbox-dropdown-list li {
+  padding: 6px 22px 6px 8px;
+  cursor: pointer;
 }
 
 .footer {
@@ -1047,14 +1191,37 @@ button.swiper-pagination-bullet {
 .footer .logo__img {
   max-width: 80px;
 }
+@media only screen and (max-width: 1023.98px) {
+  .footer .logo__img {
+    margin: 0 auto;
+  }
+}
 
 .footer-wrap {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   padding: 43px 0;
 }
+@media only screen and (min-width: 1024px) {
+  .footer-wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
 
+@media only screen and (max-width: 1023.98px) {
+  .footer-nav .nav {
+    display: block;
+    position: static;
+    background-color: transparent;
+    border: none;
+  }
+  .footer-nav .nav__list {
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 24px;
+  }
+}
 .footer-nav .nav__item {
   margin-left: 0;
   margin-right: 24px;
@@ -1068,12 +1235,23 @@ button.swiper-pagination-bullet {
 .footer-links .btn {
   margin-bottom: 20px;
 }
+@media only screen and (max-width: 1023.98px) {
+  .footer-links {
+    align-items: center;
+    margin-top: 24px;
+  }
+}
 
 .footer-bottom {
   padding: 14px 0 20px;
   text-align: center;
   background-color: #49b4d6;
 }
+@media only screen and (max-width: 1023.98px) {
+  .footer-bottom {
+    padding: 17px 0;
+  }
+}
 .footer-bottom__text {
   font-size: 14px;
   color: #fff;
@@ -1087,22 +1265,47 @@ button.swiper-pagination-bullet {
   flex: 1 0 240px;
   max-width: 240px;
 }
+@media only screen and (max-width: 1023.98px) {
+  .banner {
+    margin: 30px 0 60px;
+  }
+}
 
-.banner-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+@media only screen and (min-width: 768px) {
+  .banner-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
 }
 
-.banner-img {
-  flex: 1 0 319px;
-  max-width: 319px;
-  margin-left: 45px;
+@media only screen and (max-width: 767.98px) {
+  .banner-img {
+    max-width: 100%;
+    text-align: center;
+    margin-top: 40px;
+  }
+  .banner-img img {
+    max-width: 257px;
+    margin: 0 auto;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .banner-img {
+    flex: 1 0 319px;
+    max-width: 319px;
+    margin-left: 45px;
+  }
 }
 
 .banner-text {
   max-width: 753px;
 }
+@media only screen and (min-width: 768px) {
+  .banner-text {
+    max-width: 753px;
+  }
+}
 
 .banner-subtitle {
   font-size: 20px;
@@ -1111,6 +1314,12 @@ button.swiper-pagination-bullet {
   color: #49b4d6;
   margin-bottom: 14px;
 }
+@media only screen and (max-width: 767.98px) {
+  .banner-subtitle {
+    font-size: 14px;
+    margin-bottom: 12px;
+  }
+}
 
 .banner-buttons {
   margin-top: 24px;
@@ -1118,6 +1327,18 @@ button.swiper-pagination-bullet {
 .banner-buttons .btn:nth-of-type(2) {
   margin-left: 14px;
 }
+@media only screen and (max-width: 767.98px) {
+  .banner-buttons {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+  }
+  .banner-buttons .btn:nth-of-type(2) {
+    margin-left: 0;
+    margin-top: 12px;
+  }
+}
 
 .image-box {
   margin-bottom: 80px;
@@ -1140,6 +1361,11 @@ button.swiper-pagination-bullet {
   width: 100%;
   height: 100%;
 }
+@media only screen and (max-width: 767.98px) {
+  .image-box__img img {
+    border-radius: 40px 40px 0;
+  }
+}
 
 .image-box__link {
   display: block;
@@ -1167,16 +1393,21 @@ button.swiper-pagination-bullet {
 .image-box__comment span.grey {
   color: rgba(255, 255, 255, 0.6);
 }
+@media only screen and (max-width: 767.98px) {
+  .image-box__comment {
+    right: 3px;
+  }
+}
 
 .triangle-comment {
   position: absolute;
-  width: 0px;
-  height: 0px;
+  width: 0;
+  height: 0;
   border-style: solid;
   border-width: 26px 43px 0 0;
   border-color: #49b4d6 transparent transparent transparent;
   transform: rotate(67deg);
-  margin: 14px 0px 1px 0px;
+  margin: 14px 0 1px;
   z-index: -1;
   bottom: -24px;
   left: 22px;
@@ -1185,16 +1416,30 @@ button.swiper-pagination-bullet {
 .image-text {
   margin: 115px 0 64px;
 }
+@media only screen and (max-width: 1023.98px) {
+  .image-text {
+    margin: 90px 0 64px;
+  }
+}
 
-.image-text__wrap {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+@media only screen and (min-width: 1024px) {
+  .image-text__wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 }
 
-.image-text__content {
-  max-width: 560px;
-  margin-right: 48px;
+@media only screen and (max-width: 1023.98px) {
+  .image-text__content {
+    margin-bottom: 56px;
+  }
+}
+@media only screen and (min-width: 1024px) {
+  .image-text__content {
+    max-width: 560px;
+    margin-right: 48px;
+  }
 }
 
 .image-text__paragraph.bold {
@@ -1207,6 +1452,11 @@ button.swiper-pagination-bullet {
 .image-text__image {
   position: relative;
 }
+@media only screen and (max-width: 1023.98px) {
+  .image-text__image {
+    padding-left: 34px;
+  }
+}
 
 .image-text__image-main {
   border: 2px solid #196293;
@@ -1216,6 +1466,12 @@ button.swiper-pagination-bullet {
   height: 100%;
   max-width: 463px;
 }
+@media only screen and (max-width: 1023.98px) {
+  .image-text__image-main {
+    border-radius: 40px 40px 0;
+    max-width: 100%;
+  }
+}
 
 .image-text__image-shape {
   position: absolute;
@@ -1223,6 +1479,13 @@ button.swiper-pagination-bullet {
   left: -66px;
   max-width: 147px;
 }
+@media only screen and (max-width: 1023.98px) {
+  .image-text__image-shape {
+    max-width: 92px;
+    top: -43px;
+    left: 0;
+  }
+}
 
 .title-cards {
   margin-bottom: 64px;
@@ -1231,20 +1494,42 @@ button.swiper-pagination-bullet {
 .title-cards__wrap {
   text-align: center;
 }
+@media only screen and (max-width: 767.98px) {
+  .title-cards__wrap {
+    text-align: left;
+  }
+}
 
 .title-cards__boxes {
-  text-align: left;
-  display: flex;
-  justify-content: center;
   margin-bottom: 36px;
 }
+@media only screen and (min-width: 768px) {
+  .title-cards__boxes {
+    text-align: left;
+    display: flex;
+    justify-content: center;
+  }
+}
 
-.title-card {
-  flex: 1 1 367px;
-  max-width: 367px;
+@media only screen and (min-width: 768px) {
+  .title-card {
+    flex: 1 1 367px;
+    max-width: 367px;
+  }
+  .title-card:not(:last-of-type) {
+    margin-right: 20px;
+  }
 }
-.title-card:not(:last-of-type) {
-  margin-right: 20px;
+@media only screen and (max-width: 767.98px) {
+  .title-card {
+    margin-bottom: 30px;
+  }
+}
+
+@media only screen and (max-width: 767.98px) {
+  .title-card__title {
+    padding-left: 20px;
+  }
 }
 
 .title-card__text {
@@ -1273,9 +1558,11 @@ button.swiper-pagination-bullet {
 
 .shape-divider {
   margin-bottom: 64px;
+  overflow: hidden;
 }
 .shape-divider img {
   display: block;
+  min-width: 1123px;
 }
 
 .related-news {
@@ -1293,7 +1580,7 @@ button.swiper-pagination-bullet {
   margin-bottom: 0;
 }
 
-@media only screen and (max-width: 991.98px) {
+@media only screen and (max-width: 1023.98px) {
   .related-news__btn {
     display: none;
   }
@@ -1311,7 +1598,6 @@ button.swiper-pagination-bullet {
 @media only screen and (min-width: 768px) {
   .related-news__cards .swiper-wrapper {
     flex-wrap: wrap;
-    justify-content: center;
   }
 }
 
@@ -1322,12 +1608,10 @@ button.swiper-pagination-bullet {
 }
 @media only screen and (min-width: 768px) {
   .related-news__card {
-    max-width: 366px;
-    flex: 1 1 366px;
-    margin-bottom: 20px;
-  }
-  .related-news__card:not(:nth-of-type(3n)) {
-    margin-right: 20px;
+    max-width: 50%;
+    flex: 1 1 30%;
+    min-width: 285px;
+    margin: 0 9px 20px;
   }
 }
 @media (hover: hover) and (pointer: fine) {
@@ -1344,7 +1628,9 @@ button.swiper-pagination-bullet {
 }
 
 .related-news__tags {
-  position: relative;
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
   z-index: 2;
 }
 
@@ -1365,18 +1651,12 @@ button.swiper-pagination-bullet {
      object-fit: cover;
 }
 
-.related-news__tags {
-  position: absolute;
-  bottom: 16px;
-  right: 16px;
-}
-
 .related-news__tag {
   display: inline-block;
   background-color: #49b4d6;
   font-weight: 500;
   line-height: normal;
-  padding: 8px 10px 7px 10px;
+  padding: 8px 10px 7px;
   border-radius: 16px;
 }
 .related-news__tag:nth-of-type(2n) {
@@ -1415,7 +1695,6 @@ button.swiper-pagination-bullet {
 
 .background-text__content {
   font-size: 217px;
-  color: #fff;
   font-weight: 700;
   white-space: nowrap;
   display: block;
@@ -1423,8 +1702,15 @@ button.swiper-pagination-bullet {
   color: transparent;
   -webkit-text-stroke-width: 4px;
   -webkit-text-stroke-color: rgba(255, 255, 255, 0.4);
-  filter: drop-shadow(0px 0px 17px rgba(255, 255, 255, 0.4));
+  filter: drop-shadow(0 0 17px rgba(255, 255, 255, 0.4));
   font-family: sans-serif;
+  mix-blend-mode: soft-light;
+}
+@media only screen and (max-width: 767.98px) {
+  .background-text__content {
+    font-size: 60px;
+    -webkit-text-stroke-width: 1px;
+  }
 }
 .background-text__content span {
   display: inline-block;
@@ -1451,17 +1737,35 @@ button.swiper-pagination-bullet {
   border-radius: 0 40px 0 0;
 }
 
-.image-text-box__wrap {
-  display: flex;
+@media only screen and (min-width: 1024px) {
+  .image-text-box__wrap {
+    display: flex;
+  }
 }
 
 .image-text-box__image {
-  flex: 1 0 50%;
-  max-width: 50%;
   border-radius: 0 0 0 40px;
   overflow: hidden;
   position: relative;
 }
+@media only screen and (min-width: 1024px) {
+  .image-text-box__image {
+    flex: 1 0 50%;
+    max-width: 50%;
+  }
+}
+@media only screen and (max-width: 1023.98px) {
+  .image-text-box__image {
+    height: 372px;
+    border-radius: 0 40px 0 0;
+  }
+}
+@media only screen and (max-width: 767.98px) {
+  .image-text-box__image {
+    height: 195px;
+    border-radius: 0 20px 0 0;
+  }
+}
 .image-text-box__image img {
   position: absolute;
   top: 0;
@@ -1473,13 +1777,28 @@ button.swiper-pagination-bullet {
 }
 
 .image-text-box__content {
-  flex: 1 0 50%;
-  max-width: 50%;
   position: relative;
   padding: 48px 40px 83px;
   border-radius: 0 40px 0 0;
   background: #084a7c;
 }
+@media only screen and (min-width: 1024px) {
+  .image-text-box__content {
+    flex: 1 0 50%;
+    max-width: 50%;
+  }
+}
+@media only screen and (max-width: 1023.98px) {
+  .image-text-box__content {
+    border-radius: 0 0 40px;
+  }
+}
+@media only screen and (max-width: 767.98px) {
+  .image-text-box__content {
+    border-radius: 0 0 20px;
+    padding: 20px 20px 70px;
+  }
+}
 .image-text-box__content .image-box__comment {
   padding: 21px 17px;
   right: auto;
@@ -1503,8 +1822,14 @@ button.swiper-pagination-bullet {
   animation: none;
   -webkit-text-stroke-color: #084a7c;
   mix-blend-mode: screen;
+  white-space: normal;
   filter: none;
 }
+@media only screen and (max-width: 1199.98px) {
+  .image-grid .background-text__content {
+    font-size: 14vw;
+  }
+}
 
 .image-grid__content {
   text-align: center;
@@ -1513,23 +1838,36 @@ button.swiper-pagination-bullet {
 .image-grid__images {
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
   margin-bottom: 20px;
   margin-top: -60px;
 }
+@media only screen and (max-width: 1199.98px) {
+  .image-grid__images {
+    margin-top: -50px;
+  }
+}
+@media only screen and (max-width: 1023.98px) {
+  .image-grid__images {
+    margin-top: -40px;
+  }
+}
+@media only screen and (max-width: 767.98px) {
+  .image-grid__images {
+    margin-top: -20px;
+  }
+}
 
 .image-grid__link {
   display: block;
-  flex: 1 0 275px;
+  flex: 1 1 275px;
   max-width: 275px;
   height: 275px;
   border-radius: 20px;
   overflow: hidden;
   position: relative;
-  margin-bottom: 12px;
   transition: 0.4s ease-out;
-}
-.image-grid__link:not(:nth-of-type(4n)) {
-  margin-right: 12px;
+  margin: 0 5px 12px;
 }
 .image-grid__link img {
   position: absolute;
@@ -1577,6 +1915,24 @@ button.swiper-pagination-bullet {
 .two-images__wrap img:not(:nth-of-type(2)) {
   margin-right: 20px;
 }
+@media only screen and (max-width: 767.98px) {
+  .two-images__wrap img:not(:nth-of-type(2)) {
+    margin-right: 0;
+    margin-bottom: 14px;
+    border-radius: 16px;
+  }
+}
+@media only screen and (max-width: 767.98px) {
+  .two-images__wrap img {
+    flex: 1 1 100%;
+    max-width: 100%;
+  }
+}
+@media only screen and (max-width: 767.98px) {
+  .two-images__wrap {
+    flex-direction: column;
+  }
+}
 
 .education-filters {
   margin: 20px 0;
@@ -1586,15 +1942,30 @@ button.swiper-pagination-bullet {
   display: inline-block;
   position: relative;
 }
+.checkbox-dropdown.is-active .checkbox-dropdown-list {
+  opacity: 1;
+  pointer-events: auto;
+}
 .checkbox-dropdown .btn {
   padding: 15px 32px;
 }
+.checkbox-dropdown .btn .icon {
+  font-size: 9px;
+  color: #49b4d6;
+  margin-left: 10px;
+  position: relative;
+  top: 3px;
+}
+@media (hover: hover) and (pointer: fine) {
+  .checkbox-dropdown .btn:hover .icon {
+    color: #fff;
+  }
+}
 
 .checkbox-dropdown-list {
+  padding: 10px 0;
   z-index: 3;
   list-style: none;
-  margin: 0;
-  padding: 0;
   position: absolute;
   top: 100%;
   border: inherit;
@@ -1604,17 +1975,12 @@ button.swiper-pagination-bullet {
   opacity: 0;
   transition: 0.4s ease-in-out;
   width: 152px;
-  pointer-events: none; /* avoid mouse click events inside the dropdown */
+  pointer-events: none;
   background: rgba(73, 180, 214, 0.9);
   border-radius: 6px;
 }
-.checkbox-dropdown-list.is-active {
-  opacity: 1; /* display the dropdown */
-  pointer-events: auto; /* make sure that the user still can select checkboxes */
-}
-
 .checkbox-dropdown-list li {
-  padding: 9px 16px 9px 27px;
+  padding: 9px 16px 9px 44px;
   position: relative;
 }
 .checkbox-dropdown-list input {
@@ -1627,26 +1993,30 @@ button.swiper-pagination-bullet {
 .checkbox-dropdown-list input:checked ~ .checkmark:after {
   display: block;
 }
+.checkbox-dropdown-list input:checked ~ .checkmark {
+  background-color: #fff;
+}
 .checkbox-dropdown-list .checkmark {
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 5px;
+  left: 16px;
   height: 20px;
   width: 20px;
   border-radius: 4px;
   border: 1px solid #fff;
   background: rgba(255, 255, 255, 0.5);
+  transition: 0.4s ease-out;
 }
 .checkbox-dropdown-list .checkmark::after {
   content: "";
   position: absolute;
   display: none;
-  left: 9px;
-  top: 5px;
-  width: 5px;
+  left: 6px;
+  top: 2px;
+  width: 6px;
   height: 10px;
-  border: solid white;
-  border-width: 0 3px 3px 0;
+  border: solid #49b4d6;
+  border-width: 0 1px 1px 0;
   transform: rotate(45deg);
 }
 .checkbox-dropdown-list label {
@@ -1654,6 +2024,112 @@ button.swiper-pagination-bullet {
   font-weight: 500;
   display: flex;
   align-items: center;
+  cursor: pointer;
+}
+
+.education-cards__wrap {
+  margin-bottom: 44px;
+}
+@media only screen and (min-width: 768px) {
+  .education-cards__wrap {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+.education-card {
+  margin-bottom: 20px;
+}
+@media only screen and (min-width: 768px) {
+  .education-card {
+    flex: 1 1 30%;
+    max-width: 50%;
+    margin: 0 9px 20px;
+  }
+}
+.education-card.people .image-box__comment {
+  background-color: #084a7c;
+}
+.education-card.people .triangle-comment {
+  border-color: #084a7c transparent transparent transparent;
+}
+.education-card.people .education-card-content {
+  background-color: #084a7c;
+}
+.education-card.media .image-box__comment {
+  background-color: #1c7da3;
+}
+.education-card.media .triangle-comment {
+  border-color: #1c7da3 transparent transparent transparent;
+}
+.education-card.media .education-card-content {
+  background-color: #1c7da3;
+}
+
+.education-card-top {
+  height: 150px;
+  position: relative;
+  border-radius: 0 20px 0 0;
+  overflow: hidden;
+}
+.education-card-top img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.education-card-top .image-box__comment {
+  top: 16px;
+  left: 16px;
+  right: auto;
+  bottom: auto;
+  padding: 9px 16px;
+  border-radius: 8px;
+}
+.education-card-top .triangle-comment {
+  border-width: 13px 22px 0 0;
+  margin: 19px 0 11px;
+}
+
+.education-card-content {
+  padding: 16px;
+  border-radius: 0 0 20px 0;
+  background-color: #49b4d6;
+  display: flex;
+  flex-direction: column;
+  min-height: 136px;
+}
+
+.education-card__text {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: normal;
+  text-decoration-line: underline;
+  margin-bottom: 16px;
+}
+
+.education-icons {
+  margin-top: auto;
+}
+.education-icons .education-icon {
+  display: inline-block;
+  background-color: #82d5e8;
+  font-size: 24px;
+  padding: 8px;
+  border-radius: 5px;
+  transition: 0.4s ease-out;
+  color: #fff;
+}
+.education-icons .education-icon:not(:nth-of-type(2)) {
+  margin-right: 20px;
+}
+@media (hover: hover) and (pointer: fine) {
+  .education-icons .education-icon:hover {
+    opacity: 0.7;
+  }
 }
 
 /* --------------------------------------------------------------
diff --git a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/js/script.js b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/js/script.js
index 4c57ce6..cebd8fe 100644
--- a/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/js/script.js
+++ b/Hakaton.SlobodaNemaCenu/Hakaton.SlobodaNemaCenu.Web/wwwroot/js/script.js
@@ -36,7 +36,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \****************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nconst dropdown = {\r\n  init: function () {\r\n    this.filterDropdown();\r\n  },\r\n\r\n  filterDropdown: function () {\r\n    document\r\n      .querySelector('.checkbox-dropdown-btn')\r\n      .addEventListener('click', function (event) {\r\n        event.preventDefault();\r\n        var target = document.querySelector('.checkbox-dropdown-list');\r\n        if (target.classList.contains('is-active')) {\r\n          target.classList.remove('is-active');\r\n        } else {\r\n          target.classList.add('is-active');\r\n        }\r\n      });\r\n  }\r\n};\r\n\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (dropdown);\r\n\n\n//# sourceURL=webpack://vega-it-internship-starter/./src/js/dropdown.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nconst dropdown = {\r\n  init: function () {\r\n    this.filterDropdown();\r\n  },\r\n\r\n  filterDropdown: function () {\r\n    let dropdown = document.querySelectorAll('.js-dropdown-btn');\r\n    dropdown.forEach((button) => {\r\n      button.addEventListener('click', function (e) {\r\n        e.target.parentNode.classList.toggle('is-active');\r\n      });\r\n    });\r\n  }\r\n};\r\n\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (dropdown);\r\n\n\n//# sourceURL=webpack://vega-it-internship-starter/./src/js/dropdown.js?");
+
+/***/ }),
+
+/***/ "./src/js/header.js":
+/*!**************************!*\
+  !*** ./src/js/header.js ***!
+  \**************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nconst header = {\r\n  init: function () {\r\n    this.mobileMenu();\r\n  },\r\n\r\n  mobileMenu: function () {\r\n    document\r\n      .querySelector('.mobile-menu')\r\n      .addEventListener('click', function (event) {\r\n        event.preventDefault();\r\n        var target = document.querySelector('.header__container');\r\n        var body = document.querySelector('body');\r\n        if (target.classList.contains('active')) {\r\n          target.classList.remove('active');\r\n          body.classList.remove('scroll-disabled');\r\n        } else {\r\n          target.classList.add('active');\r\n          body.classList.add('scroll-disabled');\r\n        }\r\n      });\r\n  }\r\n};\r\n\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (header);\r\n\n\n//# sourceURL=webpack://vega-it-internship-starter/./src/js/header.js?");
 
 /***/ }),
 
@@ -46,7 +56,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \**************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var swiper__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! swiper */ \"./node_modules/swiper/swiper.mjs\");\n/* harmony import */ var _background_text__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./background-text */ \"./src/js/background-text.js\");\n/* harmony import */ var _dropdown__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./dropdown */ \"./src/js/dropdown.js\");\n//slider related news\r\n\r\nvar init = false;\r\nvar swiper;\r\nfunction swiperCard() {\r\n  if (window.innerWidth <= 768) {\r\n    if (!init) {\r\n      init = true;\r\n      swiper = new swiper__WEBPACK_IMPORTED_MODULE_0__[\"default\"]('.js-swiper', {\r\n        direction: 'horizontal',\r\n        slidesPerView: 1,\r\n        centeredSlides: true,\r\n        spaceBetween: 10\r\n      });\r\n    }\r\n  } else if (init) {\r\n    swiper.destroy();\r\n    init = false;\r\n  }\r\n}\r\nswiperCard();\r\nwindow.addEventListener('resize', swiperCard);\r\n// scroll text\r\n\r\n_background_text__WEBPACK_IMPORTED_MODULE_1__[\"default\"].init();\r\n\r\n\r\n_dropdown__WEBPACK_IMPORTED_MODULE_2__[\"default\"].init();\r\n\n\n//# sourceURL=webpack://vega-it-internship-starter/./src/js/script.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _slider__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./slider */ \"./src/js/slider.js\");\n/* harmony import */ var _header__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./header */ \"./src/js/header.js\");\n/* harmony import */ var _background_text__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./background-text */ \"./src/js/background-text.js\");\n/* harmony import */ var _dropdown__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./dropdown */ \"./src/js/dropdown.js\");\n\r\n_slider__WEBPACK_IMPORTED_MODULE_0__[\"default\"].init();\r\n\r\n\r\n_header__WEBPACK_IMPORTED_MODULE_1__[\"default\"].init();\r\n\r\n\r\n_background_text__WEBPACK_IMPORTED_MODULE_2__[\"default\"].init();\r\n\r\n\r\n_dropdown__WEBPACK_IMPORTED_MODULE_3__[\"default\"].init();\r\n\n\n//# sourceURL=webpack://vega-it-internship-starter/./src/js/script.js?");
+
+/***/ }),
+
+/***/ "./src/js/slider.js":
+/*!**************************!*\
+  !*** ./src/js/slider.js ***!
+  \**************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var swiper__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! swiper */ \"./node_modules/swiper/swiper.mjs\");\n\r\nconst slider = {\r\n  init: function () {\r\n    this.slider();\r\n    window.addEventListener('resize', slider);\r\n  },\r\n\r\n  slider: function () {\r\n    var init = false;\r\n    var swiper;\r\n    if (window.innerWidth <= 768) {\r\n      if (!init) {\r\n        init = true;\r\n        swiper = new swiper__WEBPACK_IMPORTED_MODULE_0__[\"default\"]('.js-swiper', {\r\n          direction: 'horizontal',\r\n          slidesPerView: 1,\r\n          centeredSlides: true,\r\n          spaceBetween: 10\r\n        });\r\n      }\r\n    } else if (init) {\r\n      swiper.destroy();\r\n      init = false;\r\n    }\r\n  }\r\n};\r\n\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (slider);\r\n\n\n//# sourceURL=webpack://vega-it-internship-starter/./src/js/slider.js?");
 
 /***/ }),
 
diff --git a/frontend/src/about.html b/frontend/src/about.html
index c6cd223..2b707f3 100644
--- a/frontend/src/about.html
+++ b/frontend/src/about.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sloboda Nema Cenu</title>
     <link href="./favicon.ico" rel="icon" />
-    <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="./css/style.css" />
   </head>
   <body>
     <header class="header">
@@ -52,7 +52,17 @@
             </ul>
           </nav>
           <div class="header-action">
-            <div class="language-dropdown"></div>
+            <div class="language-dropdown">
+              <button class="btn js-dropdown-btn checkbox-dropdown-btn">
+                <img src="./assets/images/state.svg" alt="" />
+                <span class="icon icon-dropdown"></span>
+              </button>
+              <ul class="js-dropdown-list checkbox-dropdown-list">
+                <li>
+                  <img src="./assets/images/state.svg" alt="" />
+                </li>
+              </ul>
+            </div>
             <button type="button" class="mobile-menu">
               <div><span class="sr-only">Mobile menu button</span></div>
             </button>
@@ -358,6 +368,6 @@ <h4 class="h4">About us</h4>
         </div>
       </div>
     </footer>
-    <script src="js/script.js"></script>
+    <script src="./js/script.js"></script>
   </body>
 </html>
diff --git a/frontend/src/activities.html b/frontend/src/activities.html
index 64c3496..20ba93e 100644
--- a/frontend/src/activities.html
+++ b/frontend/src/activities.html
@@ -52,7 +52,17 @@
             </ul>
           </nav>
           <div class="header-action">
-            <div class="language-dropdown"></div>
+            <div class="language-dropdown">
+              <button class="btn js-dropdown-btn checkbox-dropdown-btn">
+                <img src="./assets/images/state.svg" alt="" />
+                <span class="icon icon-dropdown"></span>
+              </button>
+              <ul class="js-dropdown-list checkbox-dropdown-list">
+                <li>
+                  <img src="./assets/images/state.svg" alt="" />
+                </li>
+              </ul>
+            </div>
             <button type="button" class="mobile-menu">
               <div><span class="sr-only">Mobile menu button</span></div>
             </button>
diff --git a/frontend/src/assets/images/state.svg b/frontend/src/assets/images/state.svg
new file mode 100644
index 0000000..72fd4aa
--- /dev/null
+++ b/frontend/src/assets/images/state.svg
@@ -0,0 +1,56 @@
+<svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_90_5159)">
+<g clip-path="url(#clip0_90_5159)">
+<path d="M2 14.3335H31.9999V20.4738C31.9999 20.7644 31.7683 21.0001 31.4827 21.0001H2.51726C2.23162 21.0001 2 20.7644 2 20.4738V14.3335Z" fill="white"/>
+<path d="M2.51726 1H31.4827C31.7684 1 32 1.23568 32 1.52634V7.6666H2V1.52628C2 1.23562 2.23162 1 2.51726 1Z" fill="#FF4B55"/>
+<path d="M31.9999 7.6665H2V14.3327H31.9999V7.6665Z" fill="#41479B"/>
+<path d="M12.1381 7.66515H8.41394L8.25879 6.71777H12.2933L12.1381 7.66515Z" fill="#FFE15A"/>
+<path d="M8.375 7.42822L8.41379 7.6651H12.1379L12.1767 7.42822H8.375Z" fill="#FFD350"/>
+<path d="M10.353 4.50732H10.1982V5.13889H10.353V4.50732Z" fill="#FFE15A"/>
+<path d="M10.5085 4.66553H10.043V4.8234H10.5085V4.66553Z" fill="#FFE15A"/>
+<path d="M12.15 7.03398C12.1324 7.03398 12.1146 7.03088 12.0971 7.02456C12.0165 6.99481 11.9749 6.9043 12.0041 6.82227L12.3328 5.89927C12.3491 5.85348 12.3453 5.8031 12.3223 5.76101C12.31 5.73865 12.2816 5.6993 12.2271 5.68744C11.8264 5.60081 11.0496 5.45509 10.3508 5.45509H10.2009C9.50206 5.45509 8.72528 5.60081 8.32438 5.68761C8.27013 5.6993 8.24153 5.73865 8.22935 5.76101C8.20638 5.8031 8.20251 5.85348 8.21886 5.89927L8.54745 6.82227C8.57669 6.9043 8.53503 6.99481 8.45446 7.02456C8.37395 7.05383 8.28483 7.01174 8.25571 6.92988L7.927 6.00689C7.88013 5.87518 7.89132 5.72977 7.95782 5.60778C8.0221 5.48985 8.13202 5.40626 8.25952 5.37866C8.67243 5.28923 9.47346 5.13916 10.2008 5.13916H10.3507C11.078 5.13916 11.879 5.28917 12.2918 5.37842C12.4194 5.4062 12.5294 5.48973 12.5936 5.60772C12.6601 5.72971 12.6713 5.87506 12.6245 6.00683L12.2957 6.92982C12.2731 6.99409 12.2134 7.03398 12.15 7.03398Z" fill="#FFE15A"/>
+<path d="M10.2763 6.8955C10.1906 6.8955 10.1211 6.82491 10.1211 6.73762V5.45475C10.1211 5.36747 10.1906 5.29688 10.2763 5.29688C10.3619 5.29688 10.4314 5.36747 10.4314 5.45475V6.73762C10.4315 6.82485 10.362 6.8955 10.2763 6.8955Z" fill="#FFE15A"/>
+<path d="M11.349 7.03392C11.3386 7.03392 11.328 7.03285 11.3173 7.0307C11.2334 7.01293 11.1795 6.9294 11.1969 6.84397L11.3851 5.92097C11.4096 5.80072 11.3713 5.69537 11.3495 5.67688C11.1344 5.59657 10.7027 5.45497 10.3186 5.45497H10.2328C9.84875 5.45497 9.41709 5.59657 9.19391 5.681C9.18014 5.69537 9.14182 5.80066 9.16625 5.92091L9.35446 6.84391C9.37192 6.92929 9.31801 7.01293 9.23405 7.03064C9.15002 7.04716 9.06788 6.9935 9.05065 6.90806L8.86245 5.98507C8.81557 5.75499 8.88752 5.46034 9.08557 5.3851C9.38223 5.27289 9.8218 5.13916 10.2327 5.13916H10.3186C10.7295 5.13916 11.1691 5.27283 11.4656 5.38492C11.6638 5.46034 11.7358 5.75499 11.6889 5.98507L11.5007 6.90806C11.4856 6.98277 11.421 7.03392 11.349 7.03392Z" fill="#FFE15A"/>
+<path d="M8.29758 6.95459H12.2545L12.2933 6.71777H8.25879L8.29758 6.95459Z" fill="#FFD350"/>
+<path d="M7.32801 7.66553C7.24234 7.66553 7.17285 7.73624 7.17285 7.8234V13.3375C7.17285 15.0883 8.56228 16.5076 10.2763 16.5076C11.9904 16.5076 13.3798 15.0883 13.3798 13.3375V7.8234C13.3798 7.73624 13.3103 7.66553 13.2246 7.66553H7.32801Z" fill="#FF4B55"/>
+<path d="M10.5869 12.8759L10.8973 12.0864L10.2766 12.2443L9.6559 12.0864L9.96627 12.8759L9.19043 15.5601C9.19043 15.5601 9.65596 15.8759 10.2766 15.8759C10.8973 15.8759 11.3628 15.5601 11.3628 15.5601L10.5869 12.8759Z" fill="white"/>
+<path d="M9.15211 13.5118L8.8783 13.5815L9.48058 12.4785L9.20929 12.3252L8.47775 13.665H7.7932V13.9808H8.1266L7.69629 14.3311L7.89012 14.5778L8.25568 14.2802L8.11148 14.7203L8.40592 14.8202L8.68933 13.955L9.2274 13.8181L9.15211 13.5118Z" fill="#FFE15A"/>
+<path d="M9.18931 9.24442L8.48097 8.88401C8.3509 8.81783 8.2834 8.66854 8.31867 8.52497L8.35875 8.3619C8.38652 8.24874 8.30244 8.13916 8.18777 8.13916C8.13422 8.13916 8.08359 8.1639 8.05019 8.20647C7.68264 8.67396 7.48242 9.25479 7.48242 9.85351V13.1918C7.48242 13.1918 8.13041 13.0599 8.7157 12.1936C8.82316 12.0345 9.00006 11.9404 9.18867 11.9305L8.87894 12.8759L9.49968 13.0339L10.0428 12.3763L9.18931 9.24442Z" fill="white"/>
+<path d="M11.3998 13.5118L11.6736 13.5815L11.0713 12.4785L11.3426 12.3252L12.0741 13.665H12.7587V13.9808H12.4252L12.8556 14.3311L12.6618 14.5778L12.2962 14.2802L12.4404 14.7203L12.1459 14.8202L11.8625 13.955L11.3245 13.8181L11.3998 13.5118Z" fill="#FFE15A"/>
+<path d="M11.3622 9.24442L12.0705 8.88401C12.2006 8.81783 12.2681 8.66854 12.2328 8.52497L12.1928 8.3619C12.165 8.24874 12.2491 8.13916 12.3637 8.13916C12.4173 8.13916 12.4679 8.1639 12.5013 8.20647C12.8689 8.67396 13.0691 9.25479 13.0691 9.85351V13.1918C13.0691 13.1918 12.4211 13.0599 11.8358 12.1936C11.7284 12.0345 11.5515 11.9404 11.3628 11.9305L11.6726 12.8759L11.0519 13.0338L10.5088 12.3762L11.3622 9.24442Z" fill="white"/>
+<path d="M9.34523 8.13916H8.56934L8.80213 8.45497L9.34523 8.61285L9.03486 8.77073H9.50039L9.34523 8.13916Z" fill="#FFE15A"/>
+<path d="M11.2069 8.13916H11.9828L11.75 8.45497L11.2069 8.61285L11.5173 8.77073H11.0518L11.2069 8.13916Z" fill="#FFE15A"/>
+<path d="M11.316 8.0152L10.5861 8.13897L10.2757 8.77054L9.96532 8.13897L9.23536 8.0152C9.15169 8.00101 9.08747 8.08942 9.12544 8.16663L9.49985 8.92847L9.18948 9.24429H10.2757H11.3619L11.0515 8.92847L11.4259 8.16663C11.4639 8.08936 11.3997 8.00095 11.316 8.0152Z" fill="white"/>
+<path d="M10.2757 7.02392C10.4042 7.02392 10.5084 6.9179 10.5084 6.78711C10.5084 6.65632 10.4042 6.55029 10.2757 6.55029C10.1472 6.55029 10.043 6.65632 10.043 6.78711C10.043 6.9179 10.1472 7.02392 10.2757 7.02392Z" fill="#FFBE50"/>
+<path d="M10.2728 7.48387C10.3744 7.48387 10.4567 7.42496 10.4567 7.35229C10.4567 7.27962 10.3744 7.2207 10.2728 7.2207C10.1712 7.2207 10.0889 7.27962 10.0889 7.35229C10.0889 7.42496 10.1712 7.48387 10.2728 7.48387Z" fill="#41479B"/>
+<path d="M9.35482 7.48387C9.4564 7.48387 9.53875 7.42496 9.53875 7.35229C9.53875 7.27962 9.4564 7.2207 9.35482 7.2207C9.25324 7.2207 9.1709 7.27962 9.1709 7.35229C9.1709 7.42496 9.25324 7.48387 9.35482 7.48387Z" fill="#FF4B55"/>
+<path d="M8.43686 7.48387C8.53843 7.48387 8.62078 7.42496 8.62078 7.35229C8.62078 7.27962 8.53843 7.2207 8.43686 7.2207C8.33528 7.2207 8.25293 7.27962 8.25293 7.35229C8.25293 7.42496 8.33528 7.48387 8.43686 7.48387Z" fill="#41479B"/>
+<path d="M12.1097 7.48387C12.2113 7.48387 12.2936 7.42496 12.2936 7.35229C12.2936 7.27962 12.2113 7.2207 12.1097 7.2207C12.0081 7.2207 11.9258 7.27962 11.9258 7.35229C11.9258 7.42496 12.0081 7.48387 12.1097 7.48387Z" fill="#41479B"/>
+<path d="M11.1908 7.48387C11.2923 7.48387 11.3747 7.42496 11.3747 7.35229C11.3747 7.27962 11.2923 7.2207 11.1908 7.2207C11.0892 7.2207 11.0068 7.27962 11.0068 7.35229C11.0068 7.42496 11.0892 7.48387 11.1908 7.48387Z" fill="#FF4B55"/>
+<path d="M11.3529 7.02392C11.4814 7.02392 11.5856 6.9179 11.5856 6.78711C11.5856 6.65632 11.4814 6.55029 11.3529 6.55029C11.2243 6.55029 11.1201 6.65632 11.1201 6.78711C11.1201 6.9179 11.2243 7.02392 11.3529 7.02392Z" fill="#FFBE50"/>
+<path d="M12.2034 7.02392C12.332 7.02392 12.4362 6.9179 12.4362 6.78711C12.4362 6.65632 12.332 6.55029 12.2034 6.55029C12.0749 6.55029 11.9707 6.65632 11.9707 6.78711C11.9707 6.9179 12.0749 7.02392 12.2034 7.02392Z" fill="#FFBE50"/>
+<path d="M9.19758 7.02392C9.32611 7.02392 9.43031 6.9179 9.43031 6.78711C9.43031 6.65632 9.32611 6.55029 9.19758 6.55029C9.06904 6.55029 8.96484 6.65632 8.96484 6.78711C8.96484 6.9179 9.06904 7.02392 9.19758 7.02392Z" fill="#FFBE50"/>
+<path d="M8.34601 7.02392C8.47455 7.02392 8.57875 6.9179 8.57875 6.78711C8.57875 6.65632 8.47455 6.55029 8.34601 6.55029C8.21748 6.55029 8.11328 6.65632 8.11328 6.78711C8.11328 6.9179 8.21748 7.02392 8.34601 7.02392Z" fill="#FFBE50"/>
+<path d="M10.5425 5.45514C10.5692 5.40857 10.5856 5.35509 10.5856 5.29726C10.5856 5.12287 10.4467 4.98145 10.2752 4.98145C10.1038 4.98145 9.96484 5.12281 9.96484 5.29726C9.96484 5.35509 9.98119 5.40857 10.0079 5.45514H10.5425Z" fill="#41479B"/>
+<path d="M10.2761 12.4813C9.63432 12.4813 9.1123 11.9501 9.1123 11.2971V9.16553H11.4399V11.2971C11.4399 11.9502 10.9179 12.4813 10.2761 12.4813Z" fill="#FF4B55"/>
+<path d="M11.3627 9.2443V11.2969C11.3627 11.9073 10.8763 12.4022 10.2765 12.4022C9.67658 12.4022 9.19025 11.9073 9.19025 11.2969V9.2443H11.3627ZM11.5179 9.08643H11.3627H9.19031H9.03516V9.2443V11.2969C9.03516 11.9934 9.59203 12.5601 10.2765 12.5601C10.961 12.5601 11.5179 11.9934 11.5179 11.2969V9.2443V9.08643Z" fill="#A54B50"/>
+<path d="M10.044 12.376C10.1191 12.3927 10.1968 12.402 10.2767 12.402C10.3567 12.402 10.4344 12.3926 10.5095 12.376V9.24414H10.0439C10.044 9.24414 10.044 12.376 10.044 12.376Z" fill="white"/>
+<path d="M11.3631 10.5469H9.19043V11.0206H11.3631V10.5469Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_90_5159" x="0" y="0" width="34" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_90_5159"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_90_5159" result="shape"/>
+</filter>
+<clipPath id="clip0_90_5159">
+<rect x="2" y="1" width="30" height="20" rx="1" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/src/assets/svg/download.svg b/frontend/src/assets/svg/download.svg
new file mode 100644
index 0000000..f7c6f89
--- /dev/null
+++ b/frontend/src/assets/svg/download.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+<title>download</title>
+<path d="M13 8v-6h-6v6h-5l8 8 8-8h-5zM0 18h20v2h-20v-2z"></path>
+</svg>
diff --git a/frontend/src/assets/svg/dropdown.svg b/frontend/src/assets/svg/dropdown.svg
new file mode 100644
index 0000000..5e4ddc1
--- /dev/null
+++ b/frontend/src/assets/svg/dropdown.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 5.67651L0.602887 0.911807L8.39711 0.911808L4.5 5.67651Z" fill="#49B4D6"/>
+</svg>
diff --git a/frontend/src/assets/svg/share.svg b/frontend/src/assets/svg/share.svg
new file mode 100644
index 0000000..8d9791d
--- /dev/null
+++ b/frontend/src/assets/svg/share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,1L8,5H11V14H13V5H16M18,23H6C4.89,23 4,22.1 4,21V9A2,2 0 0,1 6,7H9V9H6V21H18V9H15V7H18A2,2 0 0,1 20,9V21A2,2 0 0,1 18,23Z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/blog.html b/frontend/src/blog.html
index 6bfd165..f2e100b 100644
--- a/frontend/src/blog.html
+++ b/frontend/src/blog.html
@@ -52,7 +52,17 @@
             </ul>
           </nav>
           <div class="header-action">
-            <div class="language-dropdown"></div>
+            <div class="language-dropdown">
+              <button class="btn js-dropdown-btn checkbox-dropdown-btn">
+                <img src="./assets/images/state.svg" alt="" />
+                <span class="icon icon-dropdown"></span>
+              </button>
+              <ul class="js-dropdown-list checkbox-dropdown-list">
+                <li>
+                  <img src="./assets/images/state.svg" alt="" />
+                </li>
+              </ul>
+            </div>
             <button type="button" class="mobile-menu">
               <div><span class="sr-only">Mobile menu button</span></div>
             </button>
diff --git a/frontend/src/education.html b/frontend/src/education.html
index 4f82c86..ca5430d 100644
--- a/frontend/src/education.html
+++ b/frontend/src/education.html
@@ -52,7 +52,17 @@
             </ul>
           </nav>
           <div class="header-action">
-            <div class="language-dropdown"></div>
+            <div class="language-dropdown">
+              <button class="btn js-dropdown-btn checkbox-dropdown-btn">
+                <img src="./assets/images/state.svg" alt="" />
+                <span class="icon icon-dropdown"></span>
+              </button>
+              <ul class="js-dropdown-list checkbox-dropdown-list">
+                <li>
+                  <img src="./assets/images/state.svg" alt="" />
+                </li>
+              </ul>
+            </div>
             <button type="button" class="mobile-menu">
               <div><span class="sr-only">Mobile menu button</span></div>
             </button>
@@ -85,10 +95,10 @@ <h1 class="h1 banner-title">Education</h1>
       <section class="education-filters">
         <div class="wrap">
           <div class="checkbox-dropdown">
-            <button class="btn checkbox-dropdown-btn">
-              Svi <span class="icon icon-arrow"></span>
+            <button class="btn checkbox-dropdown-btn js-dropdown-btn">
+              Svi <span class="icon icon-dropdown"></span>
             </button>
-            <ul class="checkbox-dropdown-list">
+            <ul class="checkbox-dropdown-list js-dropdown-list">
               <li>
                 <label>
                   <input type="checkbox" value="Svi" name="Svi" />
@@ -125,6 +135,172 @@ <h1 class="h1 banner-title">Education</h1>
           </div>
         </div>
       </section>
+      <section class="education-cards">
+        <div class="wrap">
+          <div class="education-cards__wrap">
+            <div class="education-card profesional">
+              <div class="education-card-top">
+                <img src="./assets/images/education-img.png" alt="" />
+                <div class="image-box__comment">
+                  <span>profesionalci</span>
+                  <div class="triangle-comment">
+                    <span class="sr-only">Triangle shape</span>
+                  </div>
+                </div>
+              </div>
+              <div class="education-card-content">
+                <p class="education-card__text">Lorem ipsum dolor sit amet</p>
+                <div class="education-icons">
+                  <a href="" class="education-icon"
+                    ><span class="icon icon-download"
+                      ><span class="sr-only">Download</span></span
+                    ></a
+                  >
+                  <a href="" class="education-icon"
+                    ><span class="icon icon-share"
+                      ><span class="sr-only">Share</span></span
+                    ></a
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="education-card profesional">
+              <div class="education-card-top">
+                <img src="./assets/images/education-img.png" alt="" />
+                <div class="image-box__comment">
+                  <span>profesionalci</span>
+                  <div class="triangle-comment">
+                    <span class="sr-only">Triangle shape</span>
+                  </div>
+                </div>
+              </div>
+              <div class="education-card-content">
+                <p class="education-card__text">Lorem ipsum dolor sit amet</p>
+                <div class="education-icons">
+                  <a href="" class="education-icon"
+                    ><span class="icon icon-download"
+                      ><span class="sr-only">Download</span></span
+                    ></a
+                  >
+                  <a href="" class="education-icon"
+                    ><span class="icon icon-share"
+                      ><span class="sr-only">Share</span></span
+                    ></a
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="education-card profesional">
+              <div class="education-card-top">
+                <img src="./assets/images/education-img.png" alt="" />
+                <div class="image-box__comment">
+                  <span>profesionalci</span>
+                  <div class="triangle-comment">
+                    <span class="sr-only">Triangle shape</span>
+                  </div>
+                </div>
+              </div>
+              <div class="education-card-content">
+                <p class="education-card__text">Lorem ipsum dolor sit amet</p>
+                <div class="education-icons">
+                  <a href="" class="education-icon"
+                    ><span class="icon icon-download"
+                      ><span class="sr-only">Download</span></span
+                    ></a
+                  >
+                  <a href="" class="education-icon"
+                    ><span class="icon icon-share"
+                      ><span class="sr-only">Share</span></span
+                    ></a
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="education-card profesional">
+              <div class="education-card-top">
+                <img src="./assets/images/education-img.png" alt="" />
+                <div class="image-box__comment">
+                  <span>profesionalci</span>
+                  <div class="triangle-comment">
+                    <span class="sr-only">Triangle shape</span>
+                  </div>
+                </div>
+              </div>
+              <div class="education-card-content">
+                <p class="education-card__text">Lorem ipsum dolor sit amet</p>
+                <div class="education-icons">
+                  <a href="" class="education-icon"
+                    ><span class="icon icon-download"
+                      ><span class="sr-only">Download</span></span
+                    ></a
+                  >
+                  <a href="" class="education-icon"
+                    ><span class="icon icon-share"
+                      ><span class="sr-only">Share</span></span
+                    ></a
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="education-card people">
+              <div class="education-card-top">
+                <img src="./assets/images/education-img.png" alt="" />
+                <div class="image-box__comment">
+                  <span>gradjani</span>
+                  <div class="triangle-comment">
+                    <span class="sr-only">Triangle shape</span>
+                  </div>
+                </div>
+              </div>
+              <div class="education-card-content">
+                <p class="education-card__text">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit
+                </p>
+                <div class="education-icons">
+                  <a href="" class="education-icon"
+                    ><span class="icon icon-download"
+                      ><span class="sr-only">Download</span></span
+                    ></a
+                  >
+                  <a href="" class="education-icon"
+                    ><span class="icon icon-share"
+                      ><span class="sr-only">Share</span></span
+                    ></a
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="education-card media">
+              <div class="education-card-top">
+                <img src="./assets/images/education-img.png" alt="" />
+                <div class="image-box__comment">
+                  <span>mediji</span>
+                  <div class="triangle-comment">
+                    <span class="sr-only">Triangle shape</span>
+                  </div>
+                </div>
+              </div>
+              <div class="education-card-content">
+                <p class="education-card__text">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit
+                </p>
+                <div class="education-icons">
+                  <a href="" class="education-icon"
+                    ><span class="icon icon-download"
+                      ><span class="sr-only">Download</span></span
+                    ></a
+                  >
+                  <a href="" class="education-icon"
+                    ><span class="icon icon-share"
+                      ><span class="sr-only">Share</span></span
+                    ></a
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
     </main>
     <footer class="footer">
       <div class="wrap">
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 88f09d9..8170f3c 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -50,9 +50,20 @@
                 >
               </li>
             </ul>
+            <a href="" class="btn header-btn">Contact</a>
           </nav>
           <div class="header-action">
-            <div class="language-dropdown"></div>
+            <div class="language-dropdown">
+              <button class="btn js-dropdown-btn checkbox-dropdown-btn">
+                <img src="./assets/images/state.svg" alt="" />
+                <span class="icon icon-dropdown"></span>
+              </button>
+              <ul class="js-dropdown-list checkbox-dropdown-list">
+                <li>
+                  <img src="./assets/images/state.svg" alt="" />
+                </li>
+              </ul>
+            </div>
             <button type="button" class="mobile-menu">
               <div><span class="sr-only">Mobile menu button</span></div>
             </button>
diff --git a/frontend/src/js/dropdown.js b/frontend/src/js/dropdown.js
index da6b00c..d7cdb9e 100644
--- a/frontend/src/js/dropdown.js
+++ b/frontend/src/js/dropdown.js
@@ -4,18 +4,12 @@ const dropdown = {
   },
 
   filterDropdown: function () {
-    if (!document.querySelector('.checkbox-dropdown-btn')) {return; }
-    document
-      .querySelector('.checkbox-dropdown-btn')
-      .addEventListener('click', function (event) {
-        event.preventDefault();
-        var target = document.querySelector('.checkbox-dropdown-list');
-        if (target.classList.contains('is-active')) {
-          target.classList.remove('is-active');
-        } else {
-          target.classList.add('is-active');
-        }
+    let dropdown = document.querySelectorAll('.js-dropdown-btn');
+    dropdown.forEach((button) => {
+      button.addEventListener('click', function (e) {
+        e.target.parentNode.classList.toggle('is-active');
       });
+    });
   }
 };
 
diff --git a/frontend/src/js/header.js b/frontend/src/js/header.js
new file mode 100644
index 0000000..d0098f7
--- /dev/null
+++ b/frontend/src/js/header.js
@@ -0,0 +1,24 @@
+const header = {
+  init: function () {
+    this.mobileMenu();
+  },
+
+  mobileMenu: function () {
+    document
+      .querySelector('.mobile-menu')
+      .addEventListener('click', function (event) {
+        event.preventDefault();
+        var target = document.querySelector('.header__container');
+        var body = document.querySelector('body');
+        if (target.classList.contains('active')) {
+          target.classList.remove('active');
+          body.classList.remove('scroll-disabled');
+        } else {
+          target.classList.add('active');
+          body.classList.add('scroll-disabled');
+        }
+      });
+  }
+};
+
+export default header;
diff --git a/frontend/src/js/script.js b/frontend/src/js/script.js
index acaa588..0396ea7 100644
--- a/frontend/src/js/script.js
+++ b/frontend/src/js/script.js
@@ -1,26 +1,9 @@
-//slider related news
-import Swiper from 'swiper';
-var init = false;
-var swiper;
-function swiperCard() {
-  if (window.innerWidth <= 768) {
-    if (!init) {
-      init = true;
-      swiper = new Swiper('.js-swiper', {
-        direction: 'horizontal',
-        slidesPerView: 1,
-        centeredSlides: true,
-        spaceBetween: 10
-      });
-    }
-  } else if (init) {
-    swiper.destroy();
-    init = false;
-  }
-}
-swiperCard();
-window.addEventListener('resize', swiperCard);
-// scroll text
+import slider from './slider';
+slider.init();
+
+import header from './header';
+header.init();
+
 import backgroundText from './background-text';
 backgroundText.init();
 
diff --git a/frontend/src/js/slider.js b/frontend/src/js/slider.js
new file mode 100644
index 0000000..70ac046
--- /dev/null
+++ b/frontend/src/js/slider.js
@@ -0,0 +1,28 @@
+import Swiper from 'swiper';
+const slider = {
+  init: function () {
+    this.slider();
+    window.addEventListener('resize', slider);
+  },
+
+  slider: function () {
+    var init = false;
+    var swiper;
+    if (window.innerWidth <= 768) {
+      if (!init) {
+        init = true;
+        swiper = new Swiper('.js-swiper', {
+          direction: 'horizontal',
+          slidesPerView: 1,
+          centeredSlides: true,
+          spaceBetween: 10
+        });
+      }
+    } else if (init) {
+      swiper.destroy();
+      init = false;
+    }
+  }
+};
+
+export default slider;
diff --git a/frontend/src/scss/abstracts/_breakpoints.scss b/frontend/src/scss/abstracts/_breakpoints.scss
index 931010f..1a5373b 100644
--- a/frontend/src/scss/abstracts/_breakpoints.scss
+++ b/frontend/src/scss/abstracts/_breakpoints.scss
@@ -17,17 +17,25 @@
 // ------------------------------------------------------------------------------
 
 $grid-breakpoints: (
-	xs: 0,
-	sm: 576px,
-	md: 768px,
-	lg: 992px,
-	xl: 1200px
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1200px
 ) !default;
 
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-	$n: index($breakpoint-names, $name);
-
-	@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+@function breakpoint-next(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
+) {
+  $n: index($breakpoint-names, $name);
+
+  @return if(
+    $n < length($breakpoint-names),
+    nth($breakpoint-names, $n + 1),
+    null
+  );
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
@@ -35,9 +43,9 @@ $grid-breakpoints: (
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-	$min: map-get($breakpoints, $name);
+  $min: map-get($breakpoints, $name);
 
-	@return if($min != 0, $min, null);
+  @return if($min != 0, $min, null);
 }
 
 // Maximum breakpoint width. Null for the largest (last) breakpoint.
@@ -50,9 +58,9 @@ $grid-breakpoints: (
 //    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    767.98px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
-	$next: breakpoint-next($name, $breakpoints);
+  $next: breakpoint-next($name, $breakpoints);
 
-	@return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null);
+  @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null);
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
@@ -63,76 +71,80 @@ $grid-breakpoints: (
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    '-sm'
 @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
-	@return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
+  @return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
 @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
-	$min: breakpoint-min($name, $breakpoints);
-
-	@if $min {
-		@media only screen and (min-width: $min) {
-			@content;
-		}
-	} @else {
-		@content;
-	}
+  $min: breakpoint-min($name, $breakpoints);
+
+  @if $min {
+    @media only screen and (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
 }
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 // Makes the @content apply to the given breakpoint and narrower.
 @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
-	$max: breakpoint-max($name, $breakpoints);
-
-	@if $max {
-		@media only screen and (max-width: $max) {
-			@content;
-		}
-	} @else {
-		@content;
-	}
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $max {
+    @media only screen and (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
 }
 
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
-	$min: breakpoint-min($lower, $breakpoints);
-	$max: breakpoint-max($upper, $breakpoints);
-
-	@if $min != null and $max != null {
-		@media only screen and (min-width: $min) and (max-width: $max) {
-			@content;
-		}
-	} @else if $max == null {
-		@include media-breakpoint-up($lower, $breakpoints) {
-			@content;
-		}
-	} @else if $min == null {
-		@include media-breakpoint-down($upper, $breakpoints) {
-			@content;
-		}
-	}
+@mixin media-breakpoint-between(
+  $lower,
+  $upper,
+  $breakpoints: $grid-breakpoints
+) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media only screen and (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($lower, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
 }
 
 // Media between the breakpoint's minimum and maximum widths.
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
 @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
-	$min: breakpoint-min($name, $breakpoints);
-	$max: breakpoint-max($name, $breakpoints);
-
-	@if $min != null and $max != null {
-		@media only screen and (min-width: $min) and (max-width: $max) {
-			@content;
-		}
-	} @else if $max == null {
-		@include media-breakpoint-up($name, $breakpoints) {
-			@content;
-		}
-	} @else if $min == null {
-		@include media-breakpoint-down($name, $breakpoints) {
-			@content;
-		}
-	}
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media only screen and (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($name, $breakpoints) {
+      @content;
+    }
+  }
 }
diff --git a/frontend/src/scss/abstracts/_mixins.scss b/frontend/src/scss/abstracts/_mixins.scss
index 5c2c48a..c44443b 100644
--- a/frontend/src/scss/abstracts/_mixins.scss
+++ b/frontend/src/scss/abstracts/_mixins.scss
@@ -2,34 +2,6 @@
 @use 'breakpoints' as *;
 @use 'sass:math';
 
-// ----------  Text Overflow
-// ------------------------------------------------------------------------------
-@mixin text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// ----------  Vertical / horizontal alignment
-// ------------------------------------------------------------------------------
-@mixin align($position: relative, $direction: x) {
-  position: $position;
-  @if ($direction == 'y') {
-    top: 50%;
-    transform: translateY(-50%);
-  } @else if ($direction == 'xy') {
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  } @else {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}
-
-// example: @include align(absolute, xy); for centering both axis'
-// default @include align(); will be relative on x axis
-
 //	Visually hidden mixin for accessibility
 @mixin visually-hidden() {
   border: 0;
@@ -85,16 +57,6 @@ $path: '../assets/fonts' !default;
   }
 }
 
-// ----------  Animation mixin
-// ------------------------------------------------------------------------------
-
-// @include animation {transition: color 3s ease;}
-@mixin animation {
-  .loaded & {
-    @content;
-  }
-}
-
 // ----------  Iconfont mixin
 // ------------------------------------------------------------------------------
 // usage @include icon(tv, after) {your css properties}
@@ -108,39 +70,6 @@ $path: '../assets/fonts' !default;
   }
 }
 
-$window-width: 1920px;
-
-@function remove-whitespace($str) {
-  @while str-index($str, ' ') != null {
-    $index: str-index($str, ' ');
-    $str: #{str-slice($str, 0, $index - 1)}#{str-slice($str, $index + 1)};
-  }
-  @return $str;
-}
-
-@function min-size($min, $val) {
-  @if $min > $val {
-    @return $val;
-  }
-  @return $min;
-}
-
-@function max-size($val) {
-  @return math.floor($val * 1.4);
-}
-
-@function relative-size($val) {
-  @return math.div(($val * 100vw), $window-width);
-}
-
-@function fluid($min, $value: $min) {
-  $fluid: #{(
-      'clamp(' min-size($min, $value) ',' relative-size($value) ','
-        max-size($value) ')'
-    )};
-  @return remove-whitespace($fluid);
-}
-
 // usage:
 // @include fluid-grid(font-size, 32px, 44px, 56px);
 
@@ -168,59 +97,3 @@ $window-width: 1920px;
     }
   }
 }
-
-// ----------  px to viewport mixin
-// ------------------------------------------------------------------------------
-
-// usage - single: width: vp(250px) or multiple args: padding: vp(20px 10px 30px)
-// with built-in method calc(#{vp(250px)} + 50%);
-
-$unitValue: 'vw';
-$lg: 1920px;
-$md: 768px;
-$sm: 360px;
-
-@function unit($num, $unit, $screen: $lg) {
-  $vw-context: ($screen * 0.01);
-  @if $num == 0 {
-    $num: 0px;
-  }
-  $size: math.div($num, $vw-context) * 1 + #{$unit};
-  @return $size;
-}
-
-@function vp($numbers) {
-  $numberArray: ();
-  @each $num in $numbers {
-    $numberArray: append(
-      $numberArray,
-      unquote(unit($num, $unitValue)),
-      'space'
-    );
-  }
-  @return $numberArray;
-}
-
-@function vpm($numbers) {
-  $numberArray: ();
-  @each $num in $numbers {
-    $numberArray: append(
-      $numberArray,
-      unquote(unit($num, $unitValue, $md)),
-      'space'
-    );
-  }
-  @return $numberArray;
-}
-
-@function vps($numbers) {
-  $numberArray: ();
-  @each $num in $numbers {
-    $numberArray: append(
-      $numberArray,
-      unquote(unit($num, $unitValue, $sm)),
-      'space'
-    );
-  }
-  @return $numberArray;
-}
diff --git a/frontend/src/scss/abstracts/_variables.scss b/frontend/src/scss/abstracts/_variables.scss
index bbd0258..e6632ba 100644
--- a/frontend/src/scss/abstracts/_variables.scss
+++ b/frontend/src/scss/abstracts/_variables.scss
@@ -24,5 +24,4 @@ $site-colors: (
   'white': $white,
   'orange': $light-blue
 ) !default;
-
 $anim: 0.4s ease-out;
diff --git a/frontend/src/scss/base/_helpers.scss b/frontend/src/scss/base/_helpers.scss
index 1f1907e..12c7c25 100644
--- a/frontend/src/scss/base/_helpers.scss
+++ b/frontend/src/scss/base/_helpers.scss
@@ -1,34 +1,22 @@
 // ----------  helpers
 // ------------------------------------------------------------------------------
 
-@use "../abstracts/mixins" as *;
+@use '../abstracts/mixins' as *;
 
 * {
-	box-sizing: border-box;
-	&::before,
-	&::after {
-		box-sizing: border-box;
-	}
+  box-sizing: border-box;
+  &::before,
+  &::after {
+    box-sizing: border-box;
+  }
 }
 
 .sr-only {
-	@include visually-hidden;
+  @include visually-hidden;
 }
 
 .has-cover {
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
 }
-
-// Theming and colors iterator
-// @each $colors-name in $site-colors {
-// 	$name: nth($colors-name, 1);
-// 	$color: nth($colors-name, 2);
-// 	.bg-#{$name} {
-// 		background-color: $color;
-// 	}
-// 	.color-#{$name} {
-// 		color: $color;
-// 	}
-// }
diff --git a/frontend/src/scss/base/_icon-font.scss b/frontend/src/scss/base/_icon-font.scss
index 397aa0f..1f5962b 100644
--- a/frontend/src/scss/base/_icon-font.scss
+++ b/frontend/src/scss/base/_icon-font.scss
@@ -1,9 +1,9 @@
 @font-face {
 	font-family: "svgicons";
 	font-display: block;
-	src: url("../assets/fonts/svgicons.woff2?164d27d0c41adc3636551b42a8ff351a") format("woff2"),
-url("../assets/fonts/svgicons.woff?164d27d0c41adc3636551b42a8ff351a") format("woff"),
-url("../assets/fonts/svgicons.svg?164d27d0c41adc3636551b42a8ff351a#svgicons") format("svg");
+	src: url("../assets/fonts/svgicons.woff2?ea7b42ea431ad2475cebe51390efb192") format("woff2"),
+url("../assets/fonts/svgicons.woff?ea7b42ea431ad2475cebe51390efb192") format("woff"),
+url("../assets/fonts/svgicons.svg?ea7b42ea431ad2475cebe51390efb192#svgicons") format("svg");
 }
 
 .icon {
@@ -20,15 +20,24 @@ url("../assets/fonts/svgicons.svg?164d27d0c41adc3636551b42a8ff351a#svgicons") fo
 .icon-arrow:before {
 	content: "\f101";
 }
-.icon-facebook:before {
+.icon-download:before {
 	content: "\f102";
 }
-.icon-instagram:before {
+.icon-dropdown:before {
 	content: "\f103";
 }
-.icon-linkedin:before {
+.icon-facebook:before {
 	content: "\f104";
 }
-.icon-twitter:before {
+.icon-instagram:before {
 	content: "\f105";
 }
+.icon-linkedin:before {
+	content: "\f106";
+}
+.icon-share:before {
+	content: "\f107";
+}
+.icon-twitter:before {
+	content: "\f108";
+}
diff --git a/frontend/src/scss/components/_background-text.scss b/frontend/src/scss/components/_background-text.scss
index c29cfe3..39d179d 100644
--- a/frontend/src/scss/components/_background-text.scss
+++ b/frontend/src/scss/components/_background-text.scss
@@ -9,7 +9,6 @@
 }
 .background-text__content {
   font-size: 217px;
-  color: $white;
   font-weight: 700;
   white-space: nowrap;
   display: block;
@@ -17,8 +16,13 @@
   color: transparent;
   -webkit-text-stroke-width: 4px;
   -webkit-text-stroke-color: rgba($white, 0.4);
-  filter: drop-shadow(0px 0px 17px rgba($white, 0.4));
+  filter: drop-shadow(0 0 17px rgba($white, 0.4));
   font-family: sans-serif;
+  mix-blend-mode: soft-light;
+  @include media-breakpoint-down(sm) {
+    font-size: 60px;
+    -webkit-text-stroke-width: 1px;
+  }
   span {
     display: inline-block;
   }
diff --git a/frontend/src/scss/components/_banner.scss b/frontend/src/scss/components/_banner.scss
index 41f3efa..5ff73d5 100644
--- a/frontend/src/scss/components/_banner.scss
+++ b/frontend/src/scss/components/_banner.scss
@@ -11,22 +11,39 @@
       max-width: 240px;
     }
   }
+  @include media-breakpoint-down(md) {
+    margin: 30px 0 60px;
+  }
 }
 .banner-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  @include media-breakpoint-up(md) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
 }
 .banner-img {
-  flex: 1 0 319px;
-  max-width: 319px;
-  margin-left: 45px;
-}
-
-
+  @include media-breakpoint-down(sm) {
+    max-width: 100%;
+    text-align: center;
+    margin-top: 40px;
+    img {
+      max-width: 257px;
+      margin: 0 auto;
+    }
+  }
 
+  @include media-breakpoint-up(md) {
+    flex: 1 0 319px;
+    max-width: 319px;
+    margin-left: 45px;
+  }
+}
 .banner-text {
   max-width: 753px;
+  @include media-breakpoint-up(md) {
+    max-width: 753px;
+  }
 }
 .banner-subtitle {
   font-size: 20px;
@@ -34,19 +51,24 @@
   line-height: normal;
   color: $light-blue;
   margin-bottom: 14px;
+  @include media-breakpoint-down(sm) {
+    font-size: 14px;
+    margin-bottom: 12px;
+  }
 }
 .banner-buttons {
   margin-top: 24px;
   .btn:nth-of-type(2) {
     margin-left: 14px;
   }
-}
-
-.banner_link{
-  font-size: 20px;
-  font-weight: 400;
-  line-height: normal;
-  color: $light-blue;
-  margin-bottom: 14px;
-  font-weight: bold;
+  @include media-breakpoint-down(sm) {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+    .btn:nth-of-type(2) {
+      margin-left: 0;
+      margin-top: 12px;
+    }
+  }
 }
diff --git a/frontend/src/scss/components/_education.scss b/frontend/src/scss/components/_education.scss
index 5cfc91a..66a004a 100644
--- a/frontend/src/scss/components/_education.scss
+++ b/frontend/src/scss/components/_education.scss
@@ -9,16 +9,33 @@
 .checkbox-dropdown {
   display: inline-block;
   position: relative;
+  &.is-active {
+    .checkbox-dropdown-list {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
   .btn {
     padding: 15px 32px;
+    .icon {
+      font-size: 9px;
+      color: $light-blue;
+      margin-left: 10px;
+      position: relative;
+      top: 3px;
+    }
+    @include hover {
+      .icon {
+        color: $white;
+      }
+    }
   }
 }
 
 .checkbox-dropdown-list {
+  padding: 10px 0;
   z-index: 3;
   list-style: none;
-  margin: 0;
-  padding: 0;
   position: absolute;
   top: 100%;
   border: inherit;
@@ -28,18 +45,11 @@
   opacity: 0;
   transition: 0.4s ease-in-out;
   width: 152px;
-  pointer-events: none; /* avoid mouse click events inside the dropdown */
+  pointer-events: none;
   background: rgba(73, 180, 214, 0.9);
   border-radius: 6px;
-  &.is-active {
-    opacity: 1; /* display the dropdown */
-    pointer-events: auto; /* make sure that the user still can select checkboxes */
-  }
-}
-
-.checkbox-dropdown-list {
   li {
-    padding: 9px 16px 9px 27px;
+    padding: 9px 16px 9px 44px;
     position: relative;
   }
   input {
@@ -48,30 +58,34 @@
     cursor: pointer;
     height: 0;
     width: 0;
+    &:checked ~ .checkmark:after {
+      display: block;
+    }
+    &:checked ~ .checkmark {
+      background-color: $white;
+    }
   }
-  input:checked ~ .checkmark:after {
-    display: block;
-  }
+
   .checkmark {
     position: absolute;
-    top: 0;
-    left: 0;
+    top: 5px;
+    left: 16px;
     height: 20px;
     width: 20px;
     border-radius: 4px;
     border: 1px solid $white;
     background: rgba($white, 0.5);
-
+    transition: $anim;
     &::after {
       content: '';
       position: absolute;
       display: none;
-      left: 9px;
-      top: 5px;
-      width: 5px;
+      left: 6px;
+      top: 2px;
+      width: 6px;
       height: 10px;
-      border: solid white;
-      border-width: 0 3px 3px 0;
+      border: solid $light-blue;
+      border-width: 0 1px 1px 0;
       transform: rotate(45deg);
     }
   }
@@ -80,5 +94,103 @@
     font-weight: 500;
     display: flex;
     align-items: center;
+    cursor: pointer;
+  }
+}
+.education-cards__wrap {
+  margin-bottom: 44px;
+  @include media-breakpoint-up(md) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+.education-card {
+  margin-bottom: 20px;
+  @include media-breakpoint-up(md) {
+    flex: 1 1 30%;
+    max-width: 50%;
+    margin: 0 9px 20px;
+  }
+  &.people {
+    .image-box__comment {
+      background-color: $dark-blue-3;
+    }
+    .triangle-comment {
+      border-color: $dark-blue-3 transparent transparent transparent;
+    }
+    .education-card-content {
+      background-color: $dark-blue-3;
+    }
+  }
+  &.media {
+    .image-box__comment {
+      background-color: #1c7da3;
+    }
+    .triangle-comment {
+      border-color: #1c7da3 transparent transparent transparent;
+    }
+    .education-card-content {
+      background-color: #1c7da3;
+    }
+  }
+}
+.education-card-top {
+  height: 150px;
+  position: relative;
+  border-radius: 0 20px 0 0;
+  overflow: hidden;
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+  .image-box__comment {
+    top: 16px;
+    left: 16px;
+    right: auto;
+    bottom: auto;
+    padding: 9px 16px;
+    border-radius: 8px;
+  }
+  .triangle-comment {
+    border-width: 13px 22px 0 0;
+    margin: 19px 0 11px;
+  }
+}
+.education-card-content {
+  padding: 16px;
+  border-radius: 0 0 20px 0;
+  background-color: $light-blue;
+  display: flex;
+  flex-direction: column;
+  min-height: 136px;
+}
+.education-card__text {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: normal;
+  text-decoration-line: underline;
+  margin-bottom: 16px;
+}
+.education-icons {
+  margin-top: auto;
+  .education-icon {
+    display: inline-block;
+    background-color: #82d5e8;
+    font-size: 24px;
+    padding: 8px;
+    border-radius: 5px;
+    transition: $anim;
+    color: $white;
+    &:not(:nth-of-type(2)) {
+      margin-right: 20px;
+    }
+
+    @include hover {
+      opacity: 0.7;
+    }
   }
 }
diff --git a/frontend/src/scss/components/_footer.scss b/frontend/src/scss/components/_footer.scss
index 5b6304f..426ce53 100644
--- a/frontend/src/scss/components/_footer.scss
+++ b/frontend/src/scss/components/_footer.scss
@@ -9,15 +9,34 @@
   border-top: 6px solid $light-blue;
   .logo__img {
     max-width: 80px;
+    @include media-breakpoint-down(md) {
+      margin: 0 auto;
+    }
   }
 }
 .footer-wrap {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   padding: 43px 0;
+  @include media-breakpoint-up(lg) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 }
 .footer-nav {
+  @include media-breakpoint-down(md) {
+    .nav {
+      display: block;
+      position: static;
+      background-color: transparent;
+      border: none;
+    }
+    .nav__list {
+      flex-direction: row;
+      justify-content: center;
+      flex-wrap: wrap;
+      margin-top: 24px;
+    }
+  }
   .nav__item {
     margin-left: 0;
     margin-right: 24px;
@@ -30,11 +49,18 @@
   .btn {
     margin-bottom: 20px;
   }
+  @include media-breakpoint-down(md) {
+    align-items: center;
+    margin-top: 24px;
+  }
 }
 .footer-bottom {
   padding: 14px 0 20px;
   text-align: center;
   background-color: $light-blue;
+  @include media-breakpoint-down(md) {
+    padding: 17px 0;
+  }
   &__text {
     font-size: 14px;
     color: $white;
diff --git a/frontend/src/scss/components/_header.scss b/frontend/src/scss/components/_header.scss
index 091970f..cb5dd00 100644
--- a/frontend/src/scss/components/_header.scss
+++ b/frontend/src/scss/components/_header.scss
@@ -7,10 +7,36 @@
   padding: 30px 0;
   color: $white;
   border-top: 6px solid $light-blue;
+  @include media-breakpoint-down(md) {
+    position: relative;
+    z-index: 10;
+  }
 }
 .header__container {
   display: flex;
   align-items: center;
+  &.active {
+    @include media-breakpoint-down(md) {
+      .nav {
+        display: block;
+      }
+      .mobile-menu {
+        &::before {
+          transform: translateY(8px) rotate(135deg);
+        }
+        &::after {
+          transform: translateY(-10px) rotate(-135deg);
+        }
+        div {
+          transform: scale(0);
+        }
+      }
+    }
+  }
+}
+.logo {
+  position: relative;
+  z-index: 2;
 }
 .logo__img {
   display: block;
@@ -18,20 +44,57 @@
 }
 .header-action {
   margin-left: auto;
+  display: flex;
+  align-items: center;
+  .header-btn {
+    @include media-breakpoint-down(md) {
+      display: none;
+    }
+  }
+}
+.nav {
+  @include media-breakpoint-down(md) {
+    display: none;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: #0c3c63;
+    border-top: 6px solid $light-blue;
+    text-align: center;
+  }
+  .header-btn {
+    display: none;
+    @include media-breakpoint-down(md) {
+      display: inline-block;
+    }
+  }
 }
 .nav__list {
   display: flex;
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+    text-align: center;
+    margin-top: 108px;
+  }
 }
 .nav__item {
   font-size: 14px;
   font-weight: 500;
   margin-left: 24px;
+  @include media-breakpoint-down(md) {
+    margin-left: 0;
+  }
   &.active {
     .nav__link {
       color: $light-blue;
       font-weight: 600;
     }
   }
+  @include media-breakpoint-down(md) {
+    margin-bottom: 31px;
+  }
 }
 .nav__link {
   display: block;
@@ -54,15 +117,46 @@
     margin: 7px 0;
     transition: $anim;
   }
-  &:hover {
-    &::before {
-      transform: translateY(8px) rotate(135deg);
+  @include media-breakpoint-down(md) {
+    display: block;
+  }
+}
+.language-dropdown {
+  position: relative;
+  &.is-active {
+    .checkbox-dropdown-list {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+  .btn {
+    border: none;
+    padding: 12px;
+    margin-right: 20px;
+    &.is-active {
+      ~ .checkbox-dropdown-list {
+        opacity: 1;
+        pointer-events: auto;
+      }
     }
-    &::after {
-      transform: translateY(-10px) rotate(-135deg);
+    .icon {
+      font-size: 9px;
+      margin-right: 8px;
+      position: relative;
+      top: 4px;
     }
-    div {
-      transform: scale(0);
+    @include hover {
+      background-color: transparent;
+    }
+    img {
+      width: 30px;
+    }
+  }
+  .checkbox-dropdown-list {
+    width: 60px;
+    li {
+      padding: 6px 22px 6px 8px;
+      cursor: pointer;
     }
   }
 }
diff --git a/frontend/src/scss/components/_icons.scss b/frontend/src/scss/components/_icons.scss
index f04acb3..a803db3 100644
--- a/frontend/src/scss/components/_icons.scss
+++ b/frontend/src/scss/components/_icons.scss
@@ -3,6 +3,9 @@
 .icons {
   display: flex;
   margin-bottom: 23px;
+  @include media-breakpoint-down(md) {
+    justify-content: center;
+  }
 }
 .icon-link {
   display: inline-block;
diff --git a/frontend/src/scss/components/_image-box.scss b/frontend/src/scss/components/_image-box.scss
index b270b62..1bb94b4 100644
--- a/frontend/src/scss/components/_image-box.scss
+++ b/frontend/src/scss/components/_image-box.scss
@@ -24,6 +24,9 @@
     overflow: hidden;
     width: 100%;
     height: 100%;
+    @include media-breakpoint-down(sm) {
+      border-radius: 40px 40px 0;
+    }
   }
 }
 .image-box__link {
@@ -50,16 +53,19 @@
       color: rgba($white, 0.6);
     }
   }
+  @include media-breakpoint-down(sm) {
+    right: 3px;
+  }
 }
 .triangle-comment {
   position: absolute;
-  width: 0px;
-  height: 0px;
+  width: 0;
+  height: 0;
   border-style: solid;
   border-width: 26px 43px 0 0;
   border-color: $light-blue transparent transparent transparent;
   transform: rotate(67deg);
-  margin: 14px 0px 1px 0px;
+  margin: 14px 0 1px;
   z-index: -1;
   bottom: -24px;
   left: 22px;
diff --git a/frontend/src/scss/components/_image-grid.scss b/frontend/src/scss/components/_image-grid.scss
index d910ce1..76708fd 100644
--- a/frontend/src/scss/components/_image-grid.scss
+++ b/frontend/src/scss/components/_image-grid.scss
@@ -15,7 +15,11 @@
     animation: none;
     -webkit-text-stroke-color: #084a7c;
     mix-blend-mode: screen;
+    white-space: normal;
     filter: none;
+    @include media-breakpoint-down(lg) {
+      font-size: 14vw;
+    }
   }
 }
 .image-grid__content {
@@ -24,22 +28,29 @@
 .image-grid__images {
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
   margin-bottom: 20px;
   margin-top: -60px;
+  @include media-breakpoint-down(lg) {
+    margin-top: -50px;
+  }
+  @include media-breakpoint-down(md) {
+    margin-top: -40px;
+  }
+  @include media-breakpoint-down(sm) {
+    margin-top: -20px;
+  }
 }
 .image-grid__link {
   display: block;
-  flex: 1 0 275px;
+  flex: 1 1 275px;
   max-width: 275px;
   height: 275px;
   border-radius: 20px;
   overflow: hidden;
   position: relative;
-  margin-bottom: 12px;
   transition: $anim;
-  &:not(:nth-of-type(4n)) {
-    margin-right: 12px;
-  }
+  margin: 0 5px 12px;
   img {
     position: absolute;
     top: 0;
diff --git a/frontend/src/scss/components/_image-text-box.scss b/frontend/src/scss/components/_image-text-box.scss
index ba344d9..e4aa048 100644
--- a/frontend/src/scss/components/_image-text-box.scss
+++ b/frontend/src/scss/components/_image-text-box.scss
@@ -18,14 +18,27 @@
   }
 }
 .image-text-box__wrap {
-  display: flex;
+  @include media-breakpoint-up(lg) {
+    display: flex;
+  }
 }
 .image-text-box__image {
-  flex: 1 0 50%;
-  max-width: 50%;
   border-radius: 0 0 0 40px;
   overflow: hidden;
   position: relative;
+
+  @include media-breakpoint-up(lg) {
+    flex: 1 0 50%;
+    max-width: 50%;
+  }
+  @include media-breakpoint-down(md) {
+    height: 372px;
+    border-radius: 0 40px 0 0;
+  }
+  @include media-breakpoint-down(sm) {
+    height: 195px;
+    border-radius: 0 20px 0 0;
+  }
   img {
     position: absolute;
     top: 0;
@@ -36,12 +49,21 @@
   }
 }
 .image-text-box__content {
-  flex: 1 0 50%;
-  max-width: 50%;
   position: relative;
   padding: 48px 40px 83px;
   border-radius: 0 40px 0 0;
   background: $dark-blue-3;
+  @include media-breakpoint-up(lg) {
+    flex: 1 0 50%;
+    max-width: 50%;
+  }
+  @include media-breakpoint-down(md) {
+    border-radius: 0 0 40px;
+  }
+  @include media-breakpoint-down(sm) {
+    border-radius: 0 0 20px;
+    padding: 20px 20px 70px;
+  }
   .image-box__comment {
     padding: 21px 17px;
     right: auto;
diff --git a/frontend/src/scss/components/_image-text.scss b/frontend/src/scss/components/_image-text.scss
index 4ce15da..2364ff6 100644
--- a/frontend/src/scss/components/_image-text.scss
+++ b/frontend/src/scss/components/_image-text.scss
@@ -5,15 +5,25 @@
 
 .image-text {
   margin: 115px 0 64px;
+  @include media-breakpoint-down(md) {
+    margin: 90px 0 64px;
+  }
 }
 .image-text__wrap {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  @include media-breakpoint-up(lg) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 }
 .image-text__content {
-  max-width: 560px;
-  margin-right: 48px;
+  @include media-breakpoint-down(md) {
+    margin-bottom: 56px;
+  }
+  @include media-breakpoint-up(lg) {
+    max-width: 560px;
+    margin-right: 48px;
+  }
 }
 .image-text__paragraph {
   &.bold {
@@ -25,6 +35,9 @@
 }
 .image-text__image {
   position: relative;
+  @include media-breakpoint-down(md) {
+    padding-left: 34px;
+  }
 }
 
 .image-text__image-main {
@@ -34,6 +47,10 @@
   width: 100%;
   height: 100%;
   max-width: 463px;
+  @include media-breakpoint-down(md) {
+    border-radius: 40px 40px 0;
+    max-width: 100%;
+  }
 }
 
 .image-text__image-shape {
@@ -41,4 +58,9 @@
   top: -49px;
   left: -66px;
   max-width: 147px;
+  @include media-breakpoint-down(md) {
+    max-width: 92px;
+    top: -43px;
+    left: 0;
+  }
 }
diff --git a/frontend/src/scss/components/_index.scss b/frontend/src/scss/components/_index.scss
index fcfb115..f1518b3 100644
--- a/frontend/src/scss/components/_index.scss
+++ b/frontend/src/scss/components/_index.scss
@@ -13,4 +13,3 @@
 @forward 'blog';
 @forward 'two-images';
 @forward 'education';
-@forward 'contact';
diff --git a/frontend/src/scss/components/_related-news.scss b/frontend/src/scss/components/_related-news.scss
index c079bac..ca31f81 100644
--- a/frontend/src/scss/components/_related-news.scss
+++ b/frontend/src/scss/components/_related-news.scss
@@ -32,7 +32,6 @@
   .swiper-wrapper {
     @include media-breakpoint-up(md) {
       flex-wrap: wrap;
-      justify-content: center;
     }
   }
 }
@@ -41,12 +40,10 @@
   overflow: hidden;
   background: rgba(255, 255, 255, 0.05);
   @include media-breakpoint-up(md) {
-    max-width: 366px;
-    flex: 1 1 366px;
-    margin-bottom: 20px;
-    &:not(:nth-of-type(3n)) {
-      margin-right: 20px;
-    }
+    max-width: 50%;
+    flex: 1 1 30%;
+    min-width: 285px;
+    margin: 0 9px 20px;
   }
   @include hover {
     background: rgba(255, 255, 255, 0.1);
@@ -60,7 +57,9 @@
   }
 }
 .related-news__tags {
-  position: relative;
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
   z-index: 2;
 }
 .rated-news__card-top {
@@ -78,17 +77,13 @@
     object-fit: cover;
   }
 }
-.related-news__tags {
-  position: absolute;
-  bottom: 16px;
-  right: 16px;
-}
+
 .related-news__tag {
   display: inline-block;
   background-color: $light-blue;
   font-weight: 500;
   line-height: normal;
-  padding: 8px 10px 7px 10px;
+  padding: 8px 10px 7px;
   border-radius: 16px;
   &:nth-of-type(2n) {
     margin-left: 10px;
diff --git a/frontend/src/scss/components/_shape-divider.scss b/frontend/src/scss/components/_shape-divider.scss
index 46d7ed8..3cebd46 100644
--- a/frontend/src/scss/components/_shape-divider.scss
+++ b/frontend/src/scss/components/_shape-divider.scss
@@ -5,7 +5,9 @@
 
 .shape-divider {
   margin-bottom: 64px;
+  overflow: hidden;
   img {
     display: block;
+    min-width: 1123px;
   }
 }
diff --git a/frontend/src/scss/components/_title-cards.scss b/frontend/src/scss/components/_title-cards.scss
index 6306c48..b63217f 100644
--- a/frontend/src/scss/components/_title-cards.scss
+++ b/frontend/src/scss/components/_title-cards.scss
@@ -8,18 +8,33 @@
 }
 .title-cards__wrap {
   text-align: center;
+  @include media-breakpoint-down(sm) {
+    text-align: left;
+  }
 }
 .title-cards__boxes {
-  text-align: left;
-  display: flex;
-  justify-content: center;
   margin-bottom: 36px;
+  @include media-breakpoint-up(md) {
+    text-align: left;
+    display: flex;
+    justify-content: center;
+  }
 }
 .title-card {
-  flex: 1 1 367px;
-  max-width: 367px;
-  &:not(:last-of-type) {
-    margin-right: 20px;
+  @include media-breakpoint-up(md) {
+    flex: 1 1 367px;
+    max-width: 367px;
+    &:not(:last-of-type) {
+      margin-right: 20px;
+    }
+  }
+  @include media-breakpoint-down(sm) {
+    margin-bottom: 30px;
+  }
+}
+.title-card__title {
+  @include media-breakpoint-down(sm) {
+    padding-left: 20px;
   }
 }
 .title-card__text {
diff --git a/frontend/src/scss/components/_two-images.scss b/frontend/src/scss/components/_two-images.scss
index 7a7bc37..b204ef6 100644
--- a/frontend/src/scss/components/_two-images.scss
+++ b/frontend/src/scss/components/_two-images.scss
@@ -18,6 +18,18 @@
     border-radius: 20px;
     &:not(:nth-of-type(2)) {
       margin-right: 20px;
+      @include media-breakpoint-down(sm) {
+        margin-right: 0;
+        margin-bottom: 14px;
+        border-radius: 16px;
+      }
     }
+    @include media-breakpoint-down(sm) {
+      flex: 1 1 100%;
+      max-width: 100%;
+    }
+  }
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
   }
 }
diff --git a/frontend/src/scss/typography/_typography.scss b/frontend/src/scss/typography/_typography.scss
index 74956e0..43178e3 100644
--- a/frontend/src/scss/typography/_typography.scss
+++ b/frontend/src/scss/typography/_typography.scss
@@ -24,18 +24,30 @@
   font-size: 64px;
   font-weight: 700;
   margin-bottom: 15px;
+  @include media-breakpoint-down(md) {
+    font-size: 32px;
+    margin-bottom: 12px;
+  }
 }
 
 .rte h2,
 .h2 {
   font-size: 40px;
   margin-bottom: 20px;
+  @include media-breakpoint-down(sm) {
+    font-size: 24px;
+    margin-bottom: 12px;
+  }
 }
 
 .rte h3,
 .h3 {
   font-size: 24px;
   margin-bottom: 15px;
+  @include media-breakpoint-down(sm) {
+    font-size: 20px;
+    margin-bottom: 12px;
+  }
 }
 
 .rte h4,
@@ -60,9 +72,6 @@
   line-height: 21px;
   font-weight: 400;
 }
-
-
-
 .text-small {
   font-size: 14px;
   line-height: 18.2px;
@@ -70,9 +79,10 @@
 }
 .rte {
   max-width: 793px;
+  padding: 0 20px;
   margin: 0 auto 64px;
   img {
-    border-radius: 0px 20px 20px 0px;
+    border-radius: 0 20px 20px 0;
     width: 100%;
     margin-bottom: 32px;
   }