diff --git a/app/settings.py b/app/settings.py
index a0a44d2..616432f 100644
--- a/app/settings.py
+++ b/app/settings.py
@@ -109,6 +109,7 @@ PIPELINE_JS = {
             'js/forms.js',
             'js/tabs.js',
             'js/snippets.js',
+            'js/nice.js'
         ),
         'output_filename': 'js/zuykov.js',
     },
diff --git a/zsite/static/js/nice.js b/zsite/static/js/nice.js
new file mode 100644
index 0000000..9ffdff6
--- /dev/null
+++ b/zsite/static/js/nice.js
@@ -0,0 +1,636 @@
+
+angular.module('zuykov')
+
+.controller('NiceCtrl', function ($scope, $rootScope, $log) {
+  $scope.nice = [
+        { 
+          id: 1, 
+          title: 'Химические продукты', 
+          description: 'Класс включает, в основном, химические продукты, предназначенные для использования в промышленных, научных целях и сельском хозяйстве, в том числе входящие в состав товаров, относящихся к другим классам.',
+          products: [
+            'Химические продукты, предназначенные для использования в промышленных, научных целях, в фотографии, сельском хозяйстве, садоводстве и лесоводстве',
+            'Необработанные синтетические смолы, необработанные пластические материалы',
+            'Удобрения',
+            'Составы для тушения огня',
+            'Препараты для закалки и пайки металлов', 
+            'Препараты для консервирования пищевых продуктов',
+            'Дубильные вещества',
+            'Клеящие вещества для промышленных целей'
+          ]
+        },
+        { 
+          id: 2, 
+          title: 'Краски, олифы, лаки', 
+          description: 'Класс включает, в основном, краски, красящие вещества и защитные средства от коррозии.',
+          products: [
+            'Краски, олифы, лаки',
+            'защитные средства, предохраняющие металлы от коррозии и древесину от разрушения',
+            'красящие вещества',
+            'протравы',
+            'необработанные природные смолы',
+            'листовые и порошкообразные металлы, используемые для художественно-декоративных целей и художественной печати'
+          ]
+        },
+        { 
+          id: 3, 
+          title: 'Препараты для чистки, парфюмерия и косметика', 
+          description: 'Класс включает, в основном, препараты для чистки и парфюмерно-косметические товары.', 
+          products: [
+            'Препараты для отбеливания и прочие вещества для стирки',
+            'препараты для чистки, полирования, обезжиривания и абразивной обработки',
+            'мыла',
+            'парфюмерные изделия, эфирные масла, косметика, лосьоны для волос',
+            'зубные порошки и пасты'
+          ]
+        },
+        { 
+          id: 4, 
+          title: 'Технические масла, смазки, топлива', 
+          description: 'Класс включает, в основном, технические масла и смазки, топлива и осветительные материалы.', 
+          products: [
+            'Технические масла и смазки',
+            'Смазочные материалы',
+            'Составы для поглощения, смачивания и связывания пыли',
+            'Топлива (в том числе моторные бензины) и осветительные материалы',
+            'Фитили и свечи для освещения'
+          ]
+        },
+        { 
+          id: 5, 
+          title: 'Фармацевтические препараты', 
+          description: 'Класс включает, в основном, фармацевтические препараты и прочие препараты для медицинских целей.', 
+          products: [
+            'Фармацевтические и ветеринарные препараты',
+            'Гигиенические препараты для медицинских целей',
+            'Диетическое питание и вещества для медицинских или ветеринарных целей, детское питание',
+            'Пищевые добавки для человека и животных',
+            'Пластыри, перевязочные материалы',
+            'Материалы для пломбирования зубов и изготовления зубных слепков',
+            'Дезинфицирующие средства',
+            'Препараты для уничтожения вредных животных',
+            'Фунгициды, гербициды'
+          ]
+        },
+        { 
+          id: 6, 
+          title: 'Обычные металлы и сплавы', 
+          description: 'Класс включает, в основном, необработанные и частично обработанные обычные металлы и простые изделия из них.', 
+          products: [
+            'Обычные металлы и их сплавы',
+            'Металлические строительные материалы',
+            'Передвижные металлические конструкции и сооружения',
+            'Металлические материалы для рельсовых путей',
+            'Металлические тросы и проволока [неэлектрические]',
+            'Скобяные и замочные изделия',
+            'Металлические трубы',
+            'Сейфы',
+            'Изделия из обычных металлов, не относящиеся к другим классам',
+            'Руды'
+          ]
+        },
+        { 
+          id: 7, 
+          title: 'Машины, станки и двигатели', 
+          description: 'Класс включает, в основном, машины, станки и двигатели.', 
+          products: [
+            'Машины и станки',
+            'Двигатели (за исключением предназначенных для наземных транспортных средств)',
+            'Соединения и элементы передач (за исключением предназначенных для наземных транспортных средств)',
+            'Сельскохозяйственные орудия, иные чем орудия с ручным управлением',
+            'Инкубаторы',
+            'Торговые автоматы'
+          ]
+        },
+        { 
+          id: 8, 
+          title: 'Ручные инструмены', 
+          description: 'Класс включает, в основном, ручные инструменты, используемые как орудия труда в соответствующих профессиях.', 
+          products: [
+            'Ручные орудия и инструменты',
+            'Ножевые изделия, вилки и ложки',
+            'Холодное оружие',
+            'Бритвы'
+          ]
+        },
+        { 
+          id: 9, 
+          title: 'Приборы, инструменты, оборудование', 
+          description: 'Класс включает в себя приборы, программное обеспечение, инструменты и оборудование.', 
+          products: [
+            'Приборы и инструменты научные, морские, геодезические, фотографические, кинематографические, оптические, для взвешивания, измерения, сигнализации, контроля (проверки), спасания и обучения',
+            'Приборы и инструменты для передачи, распределения, трансформации, накопления, регулирования или управления электричеством',
+            'Аппаратура для записи, передачи, воспроизведения звука или изображений',
+            'Магнитные носители информации, диски звукозаписи',
+            'Компакт-диски, DVD и другие цифровые носители информации',
+            'Механизмы для аппаратов с предварительной оплатой',
+            'Кассовые аппараты, счетные машины, оборудование для обработки информации и компьютеры',
+            'Программное обеспечение',
+            'Оборудование для тушения огня'
+          ]
+        },
+        { 
+          id: 10, 
+          title: 'Медецинские приборы и инструменты', 
+          description: 'Класс включает, в основном, медицинские приборы, инструменты и изделия.', 
+          products: [
+            'Приборы и инструменты хирургические, медицинские, стоматологические и ветеринарные',
+            'Протезы конечностей, глазные и зубные протезы',
+            'Ортопедические изделия',
+            'Материалы для наложения швов'
+          ]
+        },
+        { 
+          id: 11, 
+          title: 'Устройства для получения тепла', 
+          description: 'Устройства для освещения, нагрева, получения пара, тепловой обработки пищевых продуктов, для охлаждения, сушки, вентиляции, водораспределительные и санитарно-технические.', 
+          products: [
+
+          ]
+        },
+        { 
+          id: 12, 
+          title: 'Транспортные средства', 
+          description: 'Аппараты, перемещающиеся по земле, воде и воздуху', 
+          products: [
+
+          ]
+        },
+        { 
+          id: 13, 
+          title: 'Огнестрельное оружие и пиротехнические средства', 
+          description: '', 
+          products: [
+            'Огнестрельное оружие',
+            'Боеприпасы и снаряды',
+            'Взрывчатые вещества',
+            'Фейерверки'
+          ]
+        },
+        { 
+          id: 14, 
+          title: 'Благородные металлы и их сплавы, изделия из них', 
+          description: 'Класс включает, главным образом, благородные металлы, изделия из них, не включенные в другие классы, в основном, ювелирные изделия, бижутерию и часы.', 
+          products: [
+            'Благородные металлы и их сплавы, изделия или покрытия из них, не относящиеся к другим классам',
+            'Ювелирные изделия, бижутерия, драгоценные камни',
+            'Часы и прочие хронометрические приборы'
+          ]
+        },
+        { 
+          id: 15, 
+          title: 'Музыкальные инструменты', 
+          description: '', 
+          products: [
+            'Механические пианино и их принадлежности',
+            'Музыкальные шкатулки',
+            'Электрические и электронные музыкальные инструменты'
+          ]
+        },
+        { 
+          id: 16, 
+          title: 'Бумага и изделия из бумаги', 
+          description: 'Класс включает, в основном, бумагу, изделия из бумаги и конторские принадлежности.', 
+          products: [
+            'Бумага, картон и изделия из них, не относящиеся к другим классам',
+            'Печатная продукция',
+            'Материалы для переплетных работ',
+            'Фотоснимки',
+            'Писчебумажные товары',
+            'Клейкие вещества для канцелярских и бытовых целей',
+            'Принадлежности для художников',
+            'Кисти',
+            'Пишущие машины и конторские принадлежности (за исключением мебели)',
+            'Учебные материалы и наглядные пособия (за исключением аппаратуры)',
+            'Пластмассовые материалы для упаковки (не относящиеся к другим классам)',
+            'Шрифты',
+            'Клише типографские'
+          ]
+        },
+        { 
+          id: 17, 
+          title: 'Резина, асбест, пластмассы', 
+          description: 'Класс включает, в основном, электро-, тепло- и звукоизоляционные материалы и частично обработанные пластмассы в виде листов, плиток, пластин или прутков для промышленных целей.', 
+          products: [
+            'Каучук, резина, гуттаперча, асбест, слюда и изделия из этих материалов, не относящиеся к другим классам',
+            'Изделия из частично обработанных пластмасс',
+            'Материалы для конопачения, уплотнения и изоляции',
+            'Неметаллические гибкие трубы'
+          ]
+        },
+        { 
+          id: 18, 
+          title: 'Кожа и имитация кожи', 
+          description: 'Класс включает, в основном, кожу, имитацию кожи, дорожные принадлежности, не относящиеся к другим классам, и шорные изделия.', 
+          products: [
+            'Кожа и имитация кожи, изделия из них, не относящиеся к другим классам',
+            'Шкуры животных',
+            'Дорожные сундуки, чемоданы',
+            'Зонты от дождя и солнца, трости',
+            'Хлысты, кнуты, конская сбруя и шорные изделия'
+          ]
+        },
+        { 
+          id: 19, 
+          title: 'Неметаллические строительные материалы', 
+          description: 'Класс включает, в основном, неметаллические строительные материалы.', 
+          products: [
+            'Неметаллические строительные материалы',
+            'Неметаллические жесткие трубы для строительных целей',
+            'Асфальт, смолы и битум',
+            'Неметаллические передвижные конструкции и сооружения',
+            'Неметаллические памятники'
+          ]
+        },
+        { 
+          id: 20, 
+          title: 'Мебель и другие изделия', 
+          description: 'Класс включает, в основном, мебель и ее части и изделия из пластмасс, не относящиеся к другим классам.', 
+          products: [
+            'Мебель, зеркала, обрамления для картин и т.п.',
+            'Металлическая мебель и мебель для кемпинга',
+            'Постельные принадлежности (например, матрацы, матрацы пружинные, подушки)',
+            'Зеркала, в том числе для мебели и туалетные',
+            'Пластины с регистрационными номерами неметаллические',
+            'Почтовые ящики (за исключением ящиков, изготовленных из металла или камня)'
+          ]
+        },
+        { 
+          id: 21, 
+          title: 'Домашняя и кухонная утварь', 
+          description: 'Класс включает, в основном, малогабаритные, приводимые в действие вручную домашние или кухонные приспособления, устройства и утварь, а также туалетные принадлежности, изделия из стекла и фарфора.', 
+          products: [
+            'Домашняя или кухонная утварь и посуда',
+            'Расчески и губки',
+            'Щетки (за исключением кистей)',
+            'Материалы для щеточных изделий',
+            'Приспособления для чистки и уборки',
+            'Мочалки металлические',
+            'Необработанное или частично обработанное стекло (за исключением строительного стекла)',
+            'Изделия из стекла, фарфора и фаянса, не относящиеся к другим классам'
+          ]
+        },
+        { 
+          id: 22, 
+          title: 'Верёвочно-канатные изделия', 
+          description: 'Класс включает в основном веревочно-канатные изделия и изделия из парусины, набивочные материалы и текстильное волокнистое сырье.', 
+          products: [
+            'Канаты, веревки, бечевки, сети, палатки, навесы, брезент, паруса и мешки, не относящиеся к другим классам',
+            'Набивочные материалы (за исключением из резиновых и пластических материалов)',
+            'Текстильное волокнистое сырье'
+          ]
+        },
+        { 
+          id: 23, 
+          title: 'Нити текстильные и пряжа', 
+          description: '', 
+          products: [
+
+          ]
+        },
+        { 
+          id: 24, 
+          title: 'Ткани, одеяла, покрывала и скатерти', 
+          description: 'Класс включает, в основном, ткани, одеяла, покрывала и скатерти.', 
+          products: [
+            'Ткани и текстильные изделия, не относящиеся к другим классам, покрывала и скатерти',
+            'Одеяла'
+          ]
+        },
+        { 
+          id: 25, 
+          title: 'Одежда, обувь, головные уборы', 
+          description: '', 
+          products: [
+
+          ]
+        },
+        { 
+          id: 26, 
+          title: 'Галантерейные и басонные изделия', 
+          description: 'Класс включает, в основном, галантерейные и басонные изделия.', 
+          products: [
+            'Кружева и вышитые изделия, тесьма и ленты',
+            'Пуговицы, кнопки, крючки и блочки, булавки и иглы',
+            'Искусственные цветы'
+          ]
+        },
+        { 
+          id: 27, 
+          title: 'Покрытия для полов', 
+          description: 'Класс включает, в основном, изделия, предназначенные для покрытия готовых полов или стен.', 
+          products: [
+            'Ковры, циновки, маты, линолеум и прочие покрытия для полов',
+            'Стенные обои и обивочные материалы (нетекстильные)'
+          ]
+        },
+        { 
+          id: 28, 
+          title: 'Игрушки и спортивные товары', 
+          description: '', 
+          products: [
+            'Игры, игрушки',
+            'Гимнастические и спортивные товары, не относящиеся к другим классам',
+            'Елочные украшения'
+          ]
+        },
+        { 
+          id: 29, 
+          title: 'Продукты животного происхождения', 
+          description: 'Класс включает, в основном, продовольственные товары животного происхождения, а также овощи и садово-огородные продукты, подготовленные для употребления или консервирования.', 
+          products: [
+            'Мясо, рыба, птица и дичь',
+            'Мясные экстракты',
+            'Овощи и фрукты консервированные, сушеные и подвергнутые тепловой обработке',
+            'Желе, варенье, компоты',
+            'Яйца, молоко и молочные продукты',
+            'Масла и жиры пищевые'
+          ]
+        },
+        { 
+          id: 30, 
+          title: 'Растительные пищевые продукты', 
+          description: 'Класс включает, в основном, растительные пищевые продукты, подготовленные для потребления или консервирования, а также вспомогательные добавки, предназначенные для улучшения вкусовых качеств пищевых продуктов', 
+          products: [
+            'Кофе, чай, какао, сахар, рис, тапиока (маниока), саго, заменители кофе',
+            'Мука и зерновые продукты, хлебобулочные изделия, кондитерские изделия, мороженое',
+            'Мед, сироп из патоки',
+            'Дрожжи, пекарные порошки',
+            'Соль, горчица',
+            'Уксус, приправы',
+            'Пряности',
+            'Пищевой лед'
+          ]
+        },
+        { 
+          id: 31, 
+          title: 'Продукты земледелия и лесного хозяйства', 
+          description: 'Класс включает, в основном, продукты земледелия и лесного хозяйства, живых животных и живые растения, не подвергнутые никакой обработке для потребления, а также корма для животных.', 
+          products: [
+            'Зерно и сельскохозяйственные, садово-огородные и лесные продукты, не относящиеся к другим классам',
+            'Живые животные',
+            'Свежие фрукты и овощи',
+            'Семена',
+            'Живые растения и цветы',
+            'Корма для животных',
+            'Солод'
+          ]
+        },
+        { 
+          id: 32, 
+          title: 'Безалкогольные напитки и пиво', 
+          description: 'Класс включает, в основном, безалкогольные напитки, а также пиво.', 
+          products: [
+            'Пиво',
+            'Минеральные и газированные воды и прочие безалкогольные напитки',
+            'Фруктовые напитки и фруктовые соки',
+            'Сиропы и прочие составы для изготовления напитков'
+          ]
+        },
+        { 
+          id: 33, 
+          title: 'Алкогольные напитки (за исключением пива)', 
+          description: '', 
+          products: [
+
+          ]
+        },
+        { 
+          id: 34, 
+          title: 'Табак и курительные принадлежности', 
+          description: '', 
+          products: [
+            'Табак',
+            'Курительные принадлежности',
+            'Спички',
+          ]
+        },
+        { 
+          id: 35, 
+          title: 'Помощь в управлении бизнесом', 
+          description: 'Класс включает, в основном, услуги, оказываемые лицами или организациями, основной целью которых является: (1) помощь в эксплуатации или управлении коммерческого предприятия, или (2) помощь в управлении делами или в коммерческой деятельности промышленного или торгового предприятия, а также услуги, оказываемые рекламными учреждениями, обеспечивающими, главным образом, связь с потребителями и оповещение или объявление с помощью любых средств информации о всевозможных товарах и видах услуг.', 
+          products: [
+            'Реклама',
+            'Менеджмент в сфере бизнеса',
+            'Административная деятельность в сфере бизнеса',
+            'Офисная служба'
+          ]
+        },
+        { 
+          id: 36, 
+          title: 'Финансовые услуги', 
+          description: 'Класс включает, в основном, услуги по денежно-финансовым операциям и услуги, связанные со всеми видами страховых контрактов.', 
+          products: [
+            'Страхование',
+            'Финансовая деятельность',
+            'Кредитно-денежные операции',
+            'Операции с недвижимостью',
+          ]
+        },
+        { 
+          id: 37, 
+          title: 'Строительство и ремонт', 
+          description: 'Класс включает, в основном, услуги, оказываемые подрядчиками или субподрядчиками по строительству или изготовлению капитальных зданий, а также услуги частных лиц или организаций по восстановлению объектов в их первоначальном виде или их сохранению без изменения их физических или химических характеристик.', 
+          products: [
+            'Строительство',
+            'Ремонт',
+            'Установка оборудования'
+          ]
+        },
+        { 
+          id: 38, 
+          title: 'Телекоммуникации', 
+          description: 'Класс включает, в основном, услуги, дающие возможность, по меньшей мере, одному человеку установить связь с другим человеком с помощью сенсорных средств. Такие услуги позволяют: (1) одному человеку разговаривать с другим, (2) передавать сообщения от одного человека к другому, (3) предоставлять возможность устной и визуальной коммуникации одного человека с другим (радио и телевидение).', 
+          products: [
+
+          ]
+        },
+        { 
+          id: 39, 
+          title: 'Перевозка людей и товаров', 
+          description: 'Класс включает, в основном, услуги, относящиеся к перевозке людей или товаров из одного места в другое (железнодорожным, автомобильным, водным, воздушным транспортом или по трубопроводу), и услуги, связанные с такой перевозкой, а также услуги по хранению товаров на складах или в других помещениях для предотвращения их повреждения или хищения.', 
+          products: [
+            'Транспортировка',
+            'Упаковка и хранение товаров',
+            'Организация путешествий',
+          ]
+        },
+        { 
+          id: 40, 
+          title: 'Обработка материалов', 
+          description: 'Класс включает, в основном, услуги, не относящиеся к другим классам и заключающиеся в механической или химической обработке или преобразовании предметов или органических или неорганических веществ. ', 
+          products: [
+
+          ]
+        },
+        { 
+          id: 41, 
+          title: 'Услуги обучения и развлекательные мероприятия', 
+          description: 'Класс включает, в основном, услуги отдельных лиц или организаций по развитию умственных способностей людей или дрессировке животных, а также услуги, предназначенные для развлечения людей или организации досуга.', 
+          products: [
+            'Воспитание',
+            'Обеспечение учебного процесса',
+            'Развлечения',
+            'Организация спортивных и культурно-просветительных мероприятий'
+          ]
+        },
+        { 
+          id: 42, 
+          title: 'Научные и технические услуги', 
+          description: 'Класс включает, в основном, услуги, предоставляемые физическими лицами, индивидуально или коллективно, в отношении теоретических и практических аспектов сложных областей деятельности, такие услуги предоставляются специалистами в областях химии, физики, техники и программирования.', 
+          products: [
+            'Научные и технологические услуги и относящиеся к ним научные исследования и разработки',
+            'Услуги по промышленному анализу и научным исследованиям',
+            'Разработка и усовершенствование технического и программного обеспечения компьютеров'
+          ]
+        },
+        { 
+          id: 43, 
+          title: 'Гостиницы, кейтеринг', 
+          description: 'Класс включает, в основном, услуги, предоставляемые физическими лицами или учреждениями, целью которых является приготовление пищевых продуктов и напитков для употребления и оказание услуг по предоставлению мест и питания в гостиницах, пансионатах или других заведениях, предоставляющих временное проживание.', 
+          products: [
+            'Услуги по обеспечению пищевыми продуктами и напитками',
+            'Обеспечение временного проживания'
+          ]
+        },
+        { 
+          id: 44, 
+          title: 'Медицинский и косметические услуги', 
+          description: 'Класс включает, в основном, медицинский уход, услуги в области гигиены и косметики, оказываемые лицами или учреждениями людям и животным; услуги, относящиеся к областям сельского хозяйства, огородничества и лесоводства.', 
+          products: [
+            'Медицинские услуги',
+            'Ветеринарные услуги',
+            'Услуги в области гигиены и косметики для людей и животных',
+            'Услуги в области сельского хозяйства, огородничества и лесоводства'
+          ]
+        },
+        { 
+          id: 45, 
+          title: 'Юридические услуги и службы безопасности', 
+          description: '', 
+          products: [
+            'Услуги юридические',
+            'Службы безопасности для защиты имущества и индивидуальных лиц',
+            'Персональные и социальные услуги, оказываемые другим для удовлетворения потребностей индивидуальных лиц',
+          ]
+        },
+      ];
+  
+  $scope.categories = [
+        {
+          id: 1,
+          title: 'Химические товары',
+          classes: [1, 2, 3, 4, 5]
+        },
+        {
+          id: 2,
+          title: 'Металлы и сплавы',
+          classes: [6, 14]
+        },
+        {
+          id: 3,
+          title: 'Машины и устройства',
+          classes: [7, 9, 11, 12]
+        },
+        {
+          id: 4,
+          title: 'Приборы и инструменты',
+          classes: [8, 10, 13, 15]
+        },
+        {
+          id: 5,
+          title: 'Продукты питания',
+          classes: [29, 30, 31]
+        },
+        {
+          id: 6,
+          title: 'Алкоголь и табак',
+          classes: [32, 33, 34]
+        },
+        {
+          id: 7,
+          title: 'Изделия и материалы',
+          classes: [16, 17, 18, 19]
+        },
+        {
+          id: 8,
+          title: 'Текстиль и одежда',
+          classes: [22, 23, 24, 25, 26, 27]
+        },
+        {
+          id: 9,
+          title: 'Товары для дома',
+          classes: [20, 21, 28]
+        },
+        {
+          id: 10,
+          title: 'Услуги',
+          classes: [35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45]
+        }
+    ];
+
+    $scope.selectedCategory = 1;
+
+    $scope.filterByCategory = function (nice_class) {
+      var category = $scope.categories[$scope.selectedCategory - 1];
+
+      return (category.classes.indexOf(nice_class.id) !== -1);
+    };
+
+    $scope.selectCategory = function (id) {
+      $scope.selectedCategory = id;
+    };
+
+
+    $scope.setClasses = function () {
+      var classes = [];
+
+      $(".service-trademarks-class-form form input[type=checkbox]:checked").prop('checked', false);
+
+      for(var i in $scope.nice) {
+        var el = $scope.nice[i];
+
+        if(el.selected) {
+          classes.push(el.id);
+          $(".service-trademarks-class-form form input[value=" + el.id + "]").prop('checked', true);
+        }
+      }
+
+      $rootScope.classes_values = classes;
+      $rootScope.classes = classes.length || 1;
+
+      $scope.countCategories();
+    };
+
+    $scope.countCategories = function () {
+      for(var index in $scope.categories) {
+        var category = $scope.categories[index];
+
+        category.selected = [];
+
+        for(var cl_i in category.classes) {
+          var class_el = $scope.nice[category.classes[cl_i]-1];
+
+          if(class_el.selected) {
+            category.selected.push(class_el.id);
+          }
+        }
+      }
+    };
+
+
+    $scope.getClasses = function () {
+      var classes = $rootScope.classes_values;
+      
+      for(var i in classes) {
+        var class_id = classes[i];
+
+        $scope.nice[class_id-1].selected = true;
+      }
+
+      $scope.countCategories();
+
+      $scope.setClasses();
+    };
+
+
+});
\ No newline at end of file
diff --git a/zsite/static/less/main.less b/zsite/static/less/main.less
index 7a547f0..dbc2612 100644
--- a/zsite/static/less/main.less
+++ b/zsite/static/less/main.less
@@ -28,6 +28,8 @@
 
 @import 'tabs.less';
 
+@import 'nice.less';
+
 h1 {
   font-weight: 600;
 }
diff --git a/zsite/static/less/nice.less b/zsite/static/less/nice.less
new file mode 100644
index 0000000..467e24f
--- /dev/null
+++ b/zsite/static/less/nice.less
@@ -0,0 +1,69 @@
+.nice {
+    .nice-tabs {
+        margin-top: 15px;
+        .tabs-list {
+            font-size: @font-size-h4;
+        }
+    }
+
+    .nice-catalog {
+        .make-row();
+
+
+        .nice-categories {
+          .make-xs-column(6);
+
+          ul {
+                li {
+                    width: 49%;
+
+                    .btn {
+                        padding: 0;
+                    }
+
+                    padding-bottom: 5px;
+                }
+
+                li.active {
+                    button {
+                        font-weight: bold;
+                        color: #000000;
+                        text-decoration: none;
+                    }
+
+                    
+                }
+            }
+        }
+
+        .nice-classes {
+            .make-xs-column(6);
+
+            border-left: 2px solid #ccc;
+
+            label {
+                font-weight: 100;
+            }
+        }
+
+         
+    }
+
+    .nice-selected {
+        .label {
+            font-weight: 100;
+        }
+    }
+
+    .nice-all {
+
+      ul {
+            li {
+                width: 49%;
+                label {
+                    font-weight: 100;
+                }
+            }
+        }
+    }
+}
diff --git a/zsite/templates/form_template/product_class.html b/zsite/templates/form_template/product_class.html
index da9f8ec..baaff75 100644
--- a/zsite/templates/form_template/product_class.html
+++ b/zsite/templates/form_template/product_class.html
@@ -45,46 +45,75 @@ var form = {
             {{ instance.description|safe }}
         </div>
     {% endif %}
+    
+    {% verbatim %}
+    <div class="nice" ng-controller="NiceCtrl">
+        <div id="{{ tabs_list_id }}" ng-tabs class="nice-tabs tabs-plugin">
+            <ul class="tabs-list list-unstyled list-inline">
+                <li ng-tab-head="active"><a ng-click="$event.preventDefault()" href="#nice-catalog">Каталог классов</a></li>
+                <li ng-tab-head="active"><a ng-click="$event.preventDefault()" href="#nice-all">Все по порядку</a></li>
+            </ul>
+
+
+            <div class="nice-catalog tab-body" id="nice-catalog" ng-tab-body>
+                <div class="nice-categories">
+                    <ul class="list-unstyled list-inline">
+                        <li ng-repeat="category in categories track by category.id" ng-class="selectedCategory == category.id ? 'active' : ''">
+                            <button ng-click="selectCategory(category.id)" class="btn btn-link">{{ category.title }}</button> <span class="category_size badge" id="category_{{ category.id }}_label">{{ category.selected.length || '' }}</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="nice-classes">
+                    <ul class="list-unstyled">
+                        <li ng-repeat="class in nice | filter:filterByCategory"> 
+                            <label for="class_{{ class.id }}">
+                                <input id="class_{{ class.id }}" type="checkbox" ng-model="class.selected" ng-change="setClasses()"/>
+                                <strong>{{ class.id }}</strong> – {{ class.title }} 
+                                <button ng-show="class.description.length > 0" popover="{{ class.description }}" popover-title="{{ class.title }}" popover-trigger="mouseenter" popover-placement="bottom" class="btn btn-xs btn-default">···</button>
+                            </label>
+                            
+              
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            
+            <div class="nice-all tab-body" id="nice-all" ng-tab-body>
+                <ul class="list-unstyled list-inline">
+                    <li ng-repeat="class in nice"> 
+                        <label for="class_{{ class.id }}">
+                            <input id="class_{{ class.id }}" type="checkbox" ng-model="class.selected" ng-change="setClasses()"/>
+                            <strong>{{ class.id }}</strong> – {{ class.title }} 
+                            <button ng-show="class.description.length > 0" popover="{{ class.description }}" popover-title="{{ class.title }}" popover-trigger="mouseenter" popover-placement="bottom" class="btn btn-xs btn-default">···</button>
+                        </label>
+                        
+          
+                    </li>
+                </ul>
+            </div>
+        </div>
 
+        <h5>{{ GetNoun(classes, 'Выбранн', 'Выбраны', 'Выбрано') }} {{ classes }}  {{ GetNoun(classes, 'класс', 'класса', 'классов') }}</h5>
+        <ul class="nice-selected list-unstyled list-inline">
+            <li ng-repeat="id in classes_values"><span class="label label-default"><strong>{{ nice[id-1].id }}</strong> – {{ nice[id-1].title }}</span></li>
+        </ul>
+
+    </div>
+    {% endverbatim %}
 
     <div class="form-wrapper">
         <form action="{{ form.submission_url }}" method="POST" enctype="multipart/form-data">
             <div class="form-errors" style="display:none;"></div>
 
-            <div id="{{ tabs_list_id }}" ng-tabs class="tabs-plugin service-trademark-product-class">
-                <div class="headers">
-                    <ul class="tabs-list list-unstyled list-inline">
-                        {% for field in form.visible_fields %}
-                            {% if field|is_checkboxselectmultiple %}
-                                {% if forloop.first %}  
-                                    <li ng-tab-head="active" class="text-nowrap"><a ng-click="$event.preventDefault()" href="#{{ field.id_for_label }}">{{ field.label }}</a> <span class="category_size badge" id="{{ field.name }}_label"></span></li>
-                                {% else %}
-                                    <li ng-tab-head="active"><a ng-click="$event.preventDefault()" href="#{{ field.id_for_label }}">{{ field.label }}</a> <span class="category_size badge" id="{{ field.name }}_label"></span></li>
-                                {% endif %}
-
-                            {% endif %}
-                        {% endfor %}
-                    </ul>
-                </div>
-                <div class="variants">
-                {% for field in form.visible_fields %}
-                    <div id="{{ field.id_for_label }}" ng-tab-body class="tab-body">
-                        {% if field|is_checkboxselectmultiple %}
-                            {{ field }}
-                        {% endif %}
-
-                    </div>
-                {% endfor %}
-                </div>
+            <div class="hide">
+            {% for field in form.visible_fields %}
+                {% if field|is_checkboxselectmultiple %}
+                    {{ field }}
+                {% endif %}
+            {% endfor %}
             </div>
-                {% verbatim %}  
-                    <div ng-show="classes_values.length > 0">
-                    <h5>{{ GetNoun(classes, 'Выбранн', 'Выбраны', 'Выбрано') }} {{ classes }}  {{ GetNoun(classes, 'класс', 'класса', 'классов') }}</h5>
-                        <ul class="list-unstyled list-inline">
-                            <li ng-repeat="title in classes_values"><span class="label label-default">{{ title }}</span></li>
-                        </ul>
-                    </div>
-                    {% endverbatim %}  
+          
             {% for field in form.visible_fields %}
                 {% if not field|is_checkboxselectmultiple %}
                     <div class="field-wrapper {{ field|input_class }} {{ field.css_classes }}">
@@ -138,61 +167,7 @@ var form = {
     <script type="application/javascript">
         $(function() {
            $('.forms').djangocms_forms();
-
-            $(".service-trademarks-class-form input[type=checkbox]").each(function () {
-                $(this).change(updateCount);
-              });
-
-              function updateCount () {
-                var count = $(".service-trademarks-class-form input[type=checkbox]:checked").size(),
-                    scope = angular.element($('.bill')).scope(),
-                    categories = {},
-                    classes_values = [];
-
-                $(".service-trademarks-class-form input[type=checkbox]:checked").each(function () {
-                    var $el = $(this),
-                        name = $el.attr('name');
-
-                        classes_values = classes_values.concat($el.val());
-                        if(categories[name] > 0) {
-                            categories[name] += 1;
-                        } else {
-                            categories[name] = 1;
-                        }
-                });
-
-
-                if(count == 0) {
-                    if(scope.classes > 0) {
-                        count = scope.classes;
-                    } else {
-                        count = 1;
-                    }
-                }
-
-                scope.$apply(function () {
-                    scope.classes = count;
-                    $(".category_size").html("");
-                    for(var index in categories) {
-                        var cat_count = categories[index];
-
-                        $("#" + index + "_label").html(cat_count);
-                    }
-
-                    if(scope.classes > 5) {
-                        scope.extra_classes = scope.classes - 5;
-                    } else {
-                        scope.extra_classes = 0;
-                    }
-                    if(scope.classes > 3) {
-                        scope.kz_extra_classes = scope.classes - 3;
-                    } else {
-                        scope.kz_extra_classes = 0;
-                    }
-
-                    scope.classes_values = classes_values;
-                });
-              };
+        
         });
     </script>
 {% endaddtoblock %}