diff --git a/Controller/Announcement.php b/Controller/Announcement.php
new file mode 100755
index 0000000..2dcc0f0
--- /dev/null
+++ b/Controller/Announcement.php
@@ -0,0 +1,124 @@
+<?php
+
+namespace Webkul\UVDesk\SupportCenterBundle\Controller;
+
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Webkul\UVDesk\SupportCenterBundle\Entity\Website;
+use Webkul\UVDesk\SupportCenterBundle\Entity\Announcement as MarketingAnnouncement;
+use Symfony\Bundle\FrameworkBundle\Controller\Controller;
+use Webkul\UVDesk\CoreFrameworkBundle\Services\UserService;
+use Webkul\UVDesk\CoreFrameworkBundle\FileSystem\FileSystem;
+use Symfony\Component\Translation\TranslatorInterface;
+
+Class Announcement extends Controller
+{
+    private $translator;
+    private $userService;
+
+    public function __construct(TranslatorInterface $translator, UserService $userService)
+    {
+        $this->translator = $translator;
+        $this->userService = $userService;
+    }
+
+    public function listAnnouncement(Request $request)    
+    {
+        if (!$this->userService->isAccessAuthorized('ROLE_AGENT_MANAGE_KNOWLEDGEBASE')) {
+            return $this->redirect($this->generateUrl('helpdesk_member_dashboard'));
+        }
+
+        return $this->render('@UVDeskSupportCenter/Staff/Announcement/listAnnouncement.html.twig');
+    }
+
+    public function listAnnouncementXHR(Request $request)    
+    {
+        $json = array();
+        $repository = $this->getDoctrine()->getRepository('UVDeskSupportCenterBundle:Announcement');
+        $json =  $repository->getAllAnnouncements($request->query, $this->container);
+        $response = new Response(json_encode($json));
+        $response->headers->set('Content-Type', 'application/json');
+        return $response;
+    }
+
+    public function updateAnnouncement(Request $request)
+    {
+        if (!$this->userService->isAccessAuthorized('ROLE_AGENT_MANAGE_KNOWLEDGEBASE')) {
+            return $this->redirect($this->generateUrl('helpdesk_member_dashboard'));
+        }
+        
+        $em = $this->getDoctrine()->getManager();
+        
+        if($request->attributes->get('announcementId')){
+            $announcement = $this->getDoctrine()->getRepository('UVDeskSupportCenterBundle:Announcement')
+                        ->findOneBy([
+                                'id' => $request->attributes->get('announcementId')
+                            ]);
+            $announcement->setCreatedAt(new \DateTime('now'));          
+            if(!$announcement)
+                $this->noResultFound();
+        } else {
+            $announcement = new MarketingAnnouncement;
+            $announcement->setCreatedAt(new \DateTime('now'));
+        }
+        
+        if($request->getMethod() == "POST") {
+            $request = $request->request->get('announcement_form');
+            $group = $em->getRepository('UVDeskCoreFrameworkBundle:SupportGroup')->find($request['group']);
+
+            $announcement->setTitle($request['title']);
+            $announcement->setPromoText($request['promotext']);
+            $announcement->setPromotag($request['promotag']);
+            $announcement->setTagColor($request['tagColor']);
+            $announcement->setLinkText($request['linkText']);
+            $announcement->setLinkURL($request['linkURL']);
+            $announcement->setIsActive($request['status']);
+            $announcement->setGroup($group);
+            $em->persist($announcement);
+            $em->flush();
+
+            $this->addFlash('success', 'Success! Announcement data saved successfully.');
+            return $this->redirect($this->generateUrl('helpdesk_member_knowledgebase_marketing_announcement'));
+            
+        }
+
+        return $this->render('@UVDeskSupportCenter/Staff/Announcement/announcementForm.html.twig', [
+                'announcement' => $announcement,
+                'errors' => ''
+        ]);
+    }
+
+    public function removeAnnouncementXHR(Request $request)
+    {
+        if (!$this->userService->isAccessAuthorized('ROLE_AGENT_MANAGE_KNOWLEDGEBASE')) {
+            return $this->redirect($this->generateUrl('helpdesk_member_dashboard'));
+        }
+
+        $entityManager = $this->getDoctrine()->getManager();
+        $knowledgebaseAnnouncementId = $request->attributes->get('id');
+
+        $knowledgebaseAnnouncement = $entityManager->getRepository(Announcement::class)->findOneBy([
+            'id' => $knowledgebaseAnnouncementId
+        ]);
+
+        if ($knowledgebaseAnnouncement) {
+            $entityManager->remove($knowledgebaseAnnouncement);
+            $entityManager->flush();
+
+            $json = [
+                'alertClass' => 'success',
+                'alertMessage' => 'Announcement deleted successfully!',
+            ];
+            $responseCode = 200;
+        } else {
+            $json = [
+                'alertClass' => 'warning',
+                'alertMessage' => 'Announcement not found!',
+            ];
+        }
+
+        $response = new Response(json_encode($json));
+        $response->headers->set('Content-Type', 'application/json');
+        return $response;
+    }
+}
diff --git a/Controller/Ticket.php b/Controller/Ticket.php
index 26e10f5..dfe1a4f 100644
--- a/Controller/Ticket.php
+++ b/Controller/Ticket.php
@@ -192,12 +192,15 @@ public function ticketadd(Request $request)
     
                         $thread = $this->ticketService->createTicketBase($data);
                         
-                        if ($thread) {
-                            $request->getSession()->getFlashBag()->set('success', $this->translator->trans('Success ! Ticket has been created successfully.'));
+                        if (!empty($thread)) {
+                            $ticket = $thread->getTicket();
+                            if($request->request->get('customFields') || $request->files->get('customFields')) {
+                                $this->get('ticket.service')->addTicketCustomFields($ticket, $request->request->get('customFields'), $request->files->get('customFields'));                        
+                            }
+                            $request->getSession()->getFlashBag()->set('success', sprintf('Success ! Ticket #%s has been created successfully.', $ticket->getId()));
                         } else {
-                            $request->getSession()->getFlashBag()->set('warning', $this->translator->trans('Warning ! Can not create ticket, invalid details.'));
+                            $this->addFlash('warning', $this->translator->trans('Warning ! Can not create ticket, invalid details.'));
                         }
-    
                         // Trigger ticket created event
                         $event = new GenericEvent(CoreWorkflowEvents\Ticket\Create::getId(), [
                             'entity' => $thread->getTicket(),
@@ -280,13 +283,22 @@ public function saveReply(int $id, Request $request)
                 $data['ticket'] = $ticket;
                 $data['user'] = $this->userService->getCurrentUser();
 
+                // Checking if reply is from collaborator end
+                $isTicketCollaborator = $ticket->getCollaborators() ? $ticket->getCollaborators()->toArray() : [];
+                $isCollaborator = false;
+                foreach ($isTicketCollaborator as $value) {
+                    if($value->getId() == $data['user']->getId()){
+                        $isCollaborator = true;
+                    }
+                }
+
                 // @TODO: Refactor -> Why are we filtering only these two characters?
                 $data['message'] = str_replace(['&lt;script&gt;', '&lt;/script&gt;'], '', $data['message']);
 
                 $userDetail = $this->userService->getCustomerPartialDetailById($data['user']->getId());
                 $data['fullname'] = $userDetail['name'];
                 $data['source'] = 'website';
-                $data['createdBy'] = 'customer';
+                $data['createdBy'] = $isCollaborator ? 'collaborator' : 'customer';
                 $data['attachments'] = $request->files->get('attachments');
                 $thread = $this->ticketService->createThread($ticket, $data);
 
@@ -303,10 +315,15 @@ public function saveReply(int $id, Request $request)
                     $em->flush();
                 }
 
-                // Trigger customer reply event
-                $event = new GenericEvent(CoreWorkflowEvents\Ticket\CustomerReply::getId(), [
-                    'entity' =>  $ticket,
-                ]);
+                if ($thread->getcreatedBy() == 'customer') {
+                    $event = new GenericEvent(CoreWorkflowEvents\Ticket\CustomerReply::getId(), [
+                        'entity' =>  $ticket,
+                    ]);
+                } else {
+                    $event = new GenericEvent(CoreWorkflowEvents\Ticket\CollaboratorReply::getId(), [
+                        'entity' =>  $ticket,
+                    ]);
+                }
 
                 $this->eventDispatcher->dispatch('uvdesk.automation.workflow.execute', $event);
 
@@ -327,9 +344,23 @@ public function tickets(Request $request)
     {
         $this->isWebsiteActive();
 
+        // List Announcement if any
+        $announcements =  $this->getDoctrine()->getRepository('UVDeskSupportCenterBundle:Announcement')->findBy(['isActive' => 1]);
+
+        $groupAnnouncement = [];
+        foreach($announcements as $announcement) {
+            $announcementGroupId = $announcement->getGroup();
+            $isTicketExist =  $this->getDoctrine()->getRepository('UVDeskCoreFrameworkBundle:Ticket')->findBy(['supportGroup' => $announcementGroupId, 'customer' => $this->userService->getCurrentUser()]);
+
+            if (!empty($isTicketExist)) {
+                $groupAnnouncement[] = $announcement;
+            }
+        }
+
         return $this->render('@UVDeskSupportCenter/Knowledgebase/ticketList.html.twig',
             array(
-                'searchDisable' => true
+                'searchDisable' => true,
+                'groupAnnouncement' => $groupAnnouncement
             )
         );
     }
@@ -511,6 +542,7 @@ public function downloadAttachment(Request $request)
         
         $response->headers->set('Content-type', $attachment->getContentType());
         $response->headers->set('Content-Disposition', 'attachment; filename='. $attachment->getName());
+        $response->headers->set('Content-Length', $attachment->getSize());
         $response->sendHeaders();
         $response->setContent(readfile($path));
         
@@ -577,4 +609,4 @@ public function ticketCollaboratorXhr(Request $request)
         $response->headers->set('Content-Type', 'application/json');
         return $response;
     }
-}
+}
\ No newline at end of file
diff --git a/Entity/Announcement.php b/Entity/Announcement.php
new file mode 100644
index 0000000..5680af9
--- /dev/null
+++ b/Entity/Announcement.php
@@ -0,0 +1,195 @@
+<?php
+
+namespace Webkul\UVDesk\SupportCenterBundle\Entity;
+
+use Doctrine\ORM\Mapping as ORM;
+use Webkul\UVDesk\CoreFrameworkBundle\Entity\SupportGroup;
+
+/**
+ * @ORM\Entity(repositoryClass="Webkul\UVDesk\SupportCenterBundle\Repository\AnnouncementRepository")
+ */
+class Announcement
+{
+    /**
+     * @ORM\Id()
+     * @ORM\GeneratedValue()
+     * @ORM\Column(type="integer")
+     */
+    private $id;
+
+    /**
+     * @ORM\ManyToOne(targetEntity="Webkul\UVDesk\CoreFrameworkBundle\Entity\SupportGroup")
+     * @ORM\JoinColumn(nullable=false)
+     */
+    private $group;
+
+    /**
+     * @ORM\Column(type="string", length=255)
+     */
+    private $title;
+
+    /**
+     * @ORM\Column(type="string", length=255)
+     */
+    private $promoText;
+
+    /**
+     * @ORM\Column(type="string", length=255)
+     */
+    private $promoTag;
+
+    /**
+     * @ORM\Column(type="string", length=255, nullable=true)
+     */
+    private $tagColor;
+
+    /**
+     * @ORM\Column(type="string", length=255)
+     */
+    private $linkText;
+
+    /**
+     * @ORM\Column(type="string", length=255)
+     */
+    private $linkUrl;
+
+    /**
+     * @ORM\Column(type="boolean")
+     */
+    private $isActive;
+
+    /**
+     * @ORM\Column(type="datetime", nullable=true)
+     */
+    private $createdAt;
+
+    /**
+     * @ORM\Column(type="datetime", nullable=true)
+     */
+    private $updatedAt;
+
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
+
+    public function getGroup(): ?SupportGroup
+    {
+        return $this->group;
+    }
+
+    public function setGroup(?SupportGroup $group): self
+    {
+        $this->group = $group;
+
+        return $this;
+    }
+
+    public function getTitle(): ?string
+    {
+        return $this->title;
+    }
+
+    public function setTitle(string $title): self
+    {
+        $this->title = $title;
+
+        return $this;
+    }
+
+    public function getPromoText(): ?string
+    {
+        return $this->promoText;
+    }
+
+    public function setPromoText(string $promoText): self
+    {
+        $this->promoText = $promoText;
+
+        return $this;
+    }
+
+    public function getPromoTag(): ?string
+    {
+        return $this->promoTag;
+    }
+
+    public function setPromoTag(string $promoTag): self
+    {
+        $this->promoTag = $promoTag;
+
+        return $this;
+    }
+
+    public function getTagColor(): ?string
+    {
+        return $this->tagColor;
+    }
+
+    public function setTagColor(?string $tagColor): self
+    {
+        $this->tagColor = $tagColor;
+
+        return $this;
+    }
+
+    public function getLinkText(): ?string
+    {
+        return $this->linkText;
+    }
+
+    public function setLinkText(string $linkText): self
+    {
+        $this->linkText = $linkText;
+
+        return $this;
+    }
+
+    public function getLinkUrl(): ?string
+    {
+        return $this->linkUrl;
+    }
+
+    public function setLinkUrl(string $linkUrl): self
+    {
+        $this->linkUrl = $linkUrl;
+
+        return $this;
+    }
+
+    public function getIsActive(): ?bool
+    {
+        return $this->isActive;
+    }
+
+    public function setIsActive(bool $isActive): self
+    {
+        $this->isActive = $isActive;
+
+        return $this;
+    }
+
+    public function getCreatedAt(): ?\DateTimeInterface
+    {
+        return $this->createdAt;
+    }
+
+    public function setCreatedAt(?\DateTimeInterface $createdAt): self
+    {
+        $this->createdAt = $createdAt;
+
+        return $this;
+    }
+
+    public function getUpdatedAt(): ?\DateTimeInterface
+    {
+        return $this->updatedAt;
+    }
+
+    public function setUpdatedAt(?\DateTimeInterface $updatedAt): self
+    {
+        $this->updatedAt = $updatedAt;
+
+        return $this;
+    }
+}
diff --git a/Entity/KnowledgebaseWebsite.php b/Entity/KnowledgebaseWebsite.php
index d11f9e8..f2caef2 100644
--- a/Entity/KnowledgebaseWebsite.php
+++ b/Entity/KnowledgebaseWebsite.php
@@ -107,7 +107,7 @@ class KnowledgebaseWebsite
 
     /**
      * @var string
-     * @ORM\Column(type="string", length=255, nullable=true)
+     * @ORM\Column(type="text", nullable=true)
      */
     private $broadcastMessage;
 
diff --git a/Repository/AnnouncementRepository.php b/Repository/AnnouncementRepository.php
new file mode 100644
index 0000000..31d3e44
--- /dev/null
+++ b/Repository/AnnouncementRepository.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace Webkul\UVDesk\SupportCenterBundle\Repository;
+
+use Webkul\UVDesk\SupportCenterBundle\Entity\Announcement;
+use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
+use Doctrine\Common\Persistence\ManagerRegistry;
+use Doctrine\Common\Collections\Criteria;
+use Doctrine\Common\Collections;
+use Doctrine\ORM\Tools\Pagination\Paginator;
+
+/**
+ * @method Announcement|null find($id, $lockMode = null, $lockVersion = null)
+ * @method Announcement|null findOneBy(array $criteria, array $orderBy = null)
+ * @method Announcement[]    findAll()
+ * @method Announcement[]    findBy(array $criteria, array $orderBy = null, $limit = null, $offset = null)
+ */
+class AnnouncementRepository extends ServiceEntityRepository
+{
+    public $safeFields = array('page','limit','sort','order','direction');
+    const LIMIT = 10;
+
+    public function __construct(ManagerRegistry $registry)
+    {
+        parent::__construct($registry, Announcement::class);
+    }
+    
+
+    public function getAllAnnouncements(\Symfony\Component\HttpFoundation\ParameterBag $obj = null, $container)
+    {
+        $json = array();
+        $qb = $this->getEntityManager()->createQueryBuilder();
+        $qb->select('a')->from($this->getEntityName(), 'a');
+
+        $data = $obj->all();
+        $data = array_reverse($data);
+        foreach ($data as $key => $value) {
+            if(!in_array($key,$this->safeFields)) {
+                if($key!='dateUpdated' AND $key!='dateAdded' AND $key!='search') {
+                    $qb->Andwhere('a.'.$key.' = :'.$key);
+                    $qb->setParameter($key, $value);
+                } else {
+                    if($key == 'search') {
+                        $qb->orwhere('a.title'.' LIKE :name');
+                        $qb->setParameter('name', '%'.urldecode($value).'%');
+                        $qb->orwhere('a.promoText'.' LIKE :promoText');
+                        $qb->setParameter('promoText', '%'.urldecode($value).'%');
+                    }
+                }
+            }
+        }
+
+        if(!isset($data['sort'])){
+            $qb->orderBy('a.id',Criteria::DESC);
+        }
+
+        $paginator  = $container->get('knp_paginator');
+
+        $results = $paginator->paginate(
+            $qb,
+            isset($data['page']) ? $data['page'] : 1,
+            self::LIMIT,
+            array('distinct' => false)
+        );
+
+        $newResult = [];
+        foreach ($results as $key => $result) {
+            $newResult[] = array(
+                'id'        => $result->getId(),
+                'title'      => $result->getTitle(),
+                'promoText' => $result->getPromoText(),
+                'promoTag'  => $result->getPromoTag(),
+                'tagColor'  => $result->getTagColor(),
+                'linkText'  => $result->getLinkText(),
+                'linkUrl'   => $result->getLinkUrl(),
+                'isActive'  => $result->getIsActive(),
+                'createdAt' => $result->getCreatedAt(),
+                'group'     => array(
+                    'id'    => $result->getGroup()->getId(),
+                    'name'  => $result->getGroup()->getName()
+                )
+            );
+        }
+
+        $paginationData = $results->getPaginationData();
+        $queryParameters = $results->getParams();
+
+        $paginationData['url'] = '#'.$container->get('uvdesk.service')->buildPaginationQuery($queryParameters);
+
+        $json['groups'] = $newResult;
+        $json['pagination_data'] = $paginationData;
+
+        return $json;
+    }
+}
diff --git a/Resources/config/routes/private-agents.yaml b/Resources/config/routes/private-agents.yaml
index 8cda20b..7605f90 100644
--- a/Resources/config/routes/private-agents.yaml
+++ b/Resources/config/routes/private-agents.yaml
@@ -132,3 +132,26 @@ helpdesk_member_knowledgebase_spam:
 helpdesk_member_knowledgebase_update_theme_xhr:
     path:     /branding/ajax
     controller: Webkul\UVDesk\SupportCenterBundle\Controller\Branding::BrandingXhr
+
+# Marketing Announcement section resources
+helpdesk_member_knowledgebase_marketing_announcement:
+    path:     /announcement/list
+    controller: Webkul\UVDesk\SupportCenterBundle\Controller\Announcement::listAnnouncement
+
+helpdesk_member_knowledgebase_marketing_announcement_xhr:
+    path:     /announcement/xhr
+    controller: Webkul\UVDesk\SupportCenterBundle\Controller\Announcement::listAnnouncementXHR
+
+helpdesk_member_knowledgebase_create_marketing_announcement:
+    path:     /knowledgebase/announcement/new
+    controller: Webkul\UVDesk\SupportCenterBundle\Controller\Announcement::updateAnnouncement
+
+helpdesk_member_knowledgebase_update_marketing_announcement:
+    path:     /knowledgebase/announcement/update/{announcementId}
+    controller: Webkul\UVDesk\SupportCenterBundle\Controller\Announcement::updateAnnouncement
+    defaults: { announcementId: 0 }
+
+helpdesk_member_knowledgebase_remove_marketing_announcement_xhr:
+    path:     /knowledgebase/announcement/remove/{announcementId}
+    controller: Webkul\UVDesk\SupportCenterBundle\Controller\Announcement::removeAnnouncement
+    defaults: { announcementId: 0 }
diff --git a/Resources/config/routes/private-customers.yaml b/Resources/config/routes/private-customers.yaml
index 6d6e804..a4afb11 100644
--- a/Resources/config/routes/private-customers.yaml
+++ b/Resources/config/routes/private-customers.yaml
@@ -80,4 +80,4 @@ helpdesk_customer_view_ticket_attachment:
 helpdesk_customer_front_article_search:
     path: /search/article/{s}
     controller: Webkul\UVDesk\SupportCenterBundle\Controller\Customer::searchArticle
-    defaults: { s: 0 }
+    defaults: { s: 0 }
\ No newline at end of file
diff --git a/Resources/public/css/knowledgebase.css b/Resources/public/css/knowledgebase.css
index e791f8a..22c2b91 100644
--- a/Resources/public/css/knowledgebase.css
+++ b/Resources/public/css/knowledgebase.css
@@ -426,6 +426,12 @@ input[type="radio"][disabled="disabled"] + .uv-radio-view {
   background-position: 0px -21px;
 }
 .uv-checkbox-label,
+.uv-split-field {
+  display: inline-block;
+  clear: both;
+  width: 100%;
+  margin-top: 10px;
+}
 .uv-radio-label {
   vertical-align: middle;
   display: inline-block;
@@ -3352,4 +3358,4 @@ p {
   .uv-rtl .uv-kudo .uv-kudo-button .uv-kudo-icon {
     margin: 0px;
   }
-}
+}
\ No newline at end of file
diff --git a/Resources/views/Knowledgebase/darkSkin.html.twig b/Resources/views/Knowledgebase/darkSkin.html.twig
index 54afd8b..ec69c3a 100644
--- a/Resources/views/Knowledgebase/darkSkin.html.twig
+++ b/Resources/views/Knowledgebase/darkSkin.html.twig
@@ -1,6 +1,40 @@
 {% set brandColor = websiteConfiguration.brandColor ?: '#7C70F4' %}
 {% if brandColor != '#7C70F4' and brandColor != '#7c70f4' %}
 <style>
+    .uv-btn-small,
+    .uv-btn,
+    .uv-btn-large,
+    .uv-btn-action,
+    .uv-btn-label {
+        background: {{ brandColor }};
+    }
+    .uv-btn-small:hover,
+    .uv-btn:hover,
+    .uv-btn-large:hover,
+    .uv-btn-action:hover,
+    .btn:hover,
+    .uv-btn-label:hover {
+        background: {{ brandColor }};
+        opacity: .85;
+    }
+    .uv-btn-small:active,
+    .uv-btn:active,
+    .uv-btn-large:active,
+    .uv-btn-action:active,
+    .btn:active,
+    .uv-btn-label:active {
+        background: {{ brandColor }};
+        opacity: .65;
+    }
+    .uv-btn-stroke:active {
+        border-color: {{ brandColor }};
+    }
+    .uv-dropdown .uv-dropdown-btn-active {
+        border: solid 1px {{ brandColor }};
+    }
+    .uv-cta-wrapper .uv-cta-lt svg path {
+        fill: {{ brandColor }};
+    }
     .uv-skin-dark .uv-btn-small,
     .uv-skin-dark .uv-btn,
     .uv-skin-dark .uv-btn-large,
@@ -61,7 +95,10 @@
     .uv-kb-layout-folder .uv-kb-folder {
         border-color: {{ brandColor }};
     }
-    .uv-kb-layout-folder .uv-kb-folder  .uv-kb-folder-lt {
+    .uv-kb-layout-grid .uv-kb-folder{
+        border-color: {{ brandColor }};
+    }
+    .uv-kb-layout-folder .uv-kb-folder .uv-kb-folder-lt {
         background-position: -180px 0px;
         background-color: {{ brandColor }};
         opacity: .85;
diff --git a/Resources/views/Knowledgebase/index.html.twig b/Resources/views/Knowledgebase/index.html.twig
index da28aab..bcfa602 100644
--- a/Resources/views/Knowledgebase/index.html.twig
+++ b/Resources/views/Knowledgebase/index.html.twig
@@ -1,7 +1,12 @@
 {% extends "@UVDeskSupportCenter/Templates/layout.html.twig" %}
 
 {% block body %}
-
+	<style>
+		.uv-kb-info {
+			word-break: break-all;
+		}
+	</style>
+	
 	{% set themeTemplate = themeTemplate ? themeTemplate : 'masonryView' %}
 	{% include "@UVDeskSupportCenter/Themes/" ~ themeTemplate ~ ".html.twig" %}
 	{{parent()}}
diff --git a/Resources/views/Knowledgebase/lightSkin.html.twig b/Resources/views/Knowledgebase/lightSkin.html.twig
index bcdce3e..85c9e43 100644
--- a/Resources/views/Knowledgebase/lightSkin.html.twig
+++ b/Resources/views/Knowledgebase/lightSkin.html.twig
@@ -62,18 +62,23 @@
     .uv-hero {
         background-color: {{ brandColor }};
     }
-
+    
     .uv-cta-wrapper .uv-cta-lt svg path {
         fill: {{ brandColor }};
     }
     .uv-kb-layout-folder .uv-kb-folder {
         border-color: {{ brandColor }};
     }
+
+    .uv-kb-layout-grid .uv-kb-folder{
+        border-color: {{ brandColor }};
+    }
+
     .uv-kb-layout-folder .uv-kb-folder .uv-kb-folder-lt {
         background-position: -90px 0px;
         background-color: {{ brandColor }};
     }
-
+    
     .uv-paper-article .uv-paper-section .uv-folder-title:after {
         background-color: {{ brandColor }};
     }
diff --git a/Resources/views/Knowledgebase/ticket.html.twig b/Resources/views/Knowledgebase/ticket.html.twig
index 8d1641c..c21ffd4 100644
--- a/Resources/views/Knowledgebase/ticket.html.twig
+++ b/Resources/views/Knowledgebase/ticket.html.twig
@@ -105,6 +105,93 @@
                             <!-- Recaptcha will not support -->
                         {% endif %}
 
+						{# CustomFields #}
+						{% set CustomerCustomFields = ticket_service.getCustomerCreateTicketCustomFieldSnippet() %}
+						{% set removeMe = [] %}
+						{% if CustomerCustomFields %}
+							<div class="custom-fields clearfix">
+								{% for key, customField in CustomerCustomFields %}
+									<div class="uv-element-block input-group {{ customField.customFieldsDependency|length ? 'dependent' : '' }} {% for customFieldCustomFieldsDependency in customField.customFieldsDependency %} dependency{{customFieldCustomFieldsDependency.id}}{% endfor %}" style="position: relative; {{ customField.customFieldsDependency|length ? 'display: none;' : '' }}">
+										<label class="uv-field-label" for="for{{customField.name~customField.id}}">{{ customField.name }}</label>
+										{% if customField.fieldType == 'text' %}
+											<div class="uv-field-block">
+												<input type="{{ customField['validation']['fieldtype'] is defined ? customField['validation']['fieldtype'] :'text' }}" name="customFields[{{customField.id}}]" class="uv-field create-ticket" value="" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}" placeholder="{{customField.value}}">
+											</div>
+
+										{% elseif customField.fieldType in ['date', 'time', 'datetime'] %}
+											<div class="uv-field-block">
+												<input class="uv-field form-control create-ticket uv-date-picker {% if customField.fieldType == 'time' %}time{% else %}calendar{% endif %} uv-header-{{ customField.fieldType }}" type="text" name="customFields[{{customField.id}}]" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}" value="">
+											</div>
+										{% elseif customField.fieldType == 'textarea' %}
+											<div class="uv-field-block">
+												<textarea name="customFields[{{customField.id}}]" class="uv-field create-ticket" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}"></textarea>
+											</div>
+
+										{% elseif customField.fieldType in ['file'] %}
+											<div class="uv-field-block">
+												<input type="file" name="customFields[{{customField.id}}]" class="uv-field create-ticket" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}">
+											</div>
+
+										{% elseif customField.fieldType in ['select'] %}
+											{% if customField.customFieldValues is not empty %}
+												<div class="uv-field-block">
+													<select name="customFields[{{customField.id}}]" class="uv-select create-ticket" id="for{{customField.name~customField.id}}" {{ customField.required ? "required" : "" }}>
+														<option value="">{{ 'Select option' }}</option>
+														{% for customFieldValues in customField.customFieldValues %}
+															<option value="{{customFieldValues.id}}">{{customFieldValues.name}}</option>
+														{% endfor %}
+													</select>
+												</div>
+											{% else %}
+												<!--Hide this beacause choices aren't available-->
+												{% set removeMe = removeMe|merge(["for"~customField.name~customField.id]) %}
+											{% endif %}
+
+										{% elseif customField.fieldType in ['checkbox'] %}
+											{% if customField.customFieldValues is not empty %}
+												{% for customFieldValues in customField.customFieldValues %}
+													<div class="uv-split-field">
+														<label>
+															<div class="uv-checkbox">
+																<input type="checkbox" name="customFields[{{customField.id}}][]" value="{{customFieldValues.id}}" id="for{{customFieldValues.name~customFieldValues.id}}" class="create-ticket"/>
+																<span class="uv-checkbox-view"></span>
+															</div>
+															<span class="uv-radio-label" for="for{{customFieldValues.name~customFieldValues.id}}">{{ customFieldValues.name }}</span>
+														</label>
+													</div>
+												{% endfor %}
+											{% else %}
+												<!--Hide this beacause choices aren't available-->
+												{% set removeMe = removeMe|merge(["for"~customField.name~customField.id]) %}
+											{% endif %}
+
+										{% elseif customField.fieldType in ['radio'] %}
+											{% if customField.customFieldValues is not empty %}
+												{% for customFieldValues in customField.customFieldValues %}
+													<div class="uv-split-field">
+														<label>
+															<div class="uv-radio">
+																<input type="radio" name="customFields[{{customField.id}}]" value="{{customFieldValues.id}}" id="for{{customFieldValues.name~customFieldValues.id}}" class="create-ticket"/>
+																<span class="uv-radio-view"></span>
+															</div>
+															<span class="uv-radio-label" for="for{{customFieldValues.name~customFieldValues.id}}">{{ customFieldValues.name }}</span>
+														</label>
+													</div>
+												{% endfor %}
+											{% else %}
+												<!--Hide this beacause choices aren't available-->
+												{% set removeMe = removeMe|merge(["for"~customField.name~customField.id]) %}
+											{% endif %}
+
+										{% endif %}
+										{% if formErrors['customFields['~customField.id~']'] is defined %}
+											<div class="text-danger">{{formErrors['customFields['~customField.id~']']}}</div>
+										{% endif %}
+									</div>
+								{% endfor %}
+							</div>
+						{% endif %}
+
 						<div class="uv-element-block">
 							<button type="submit" id="create-ticket-btn" class="uv-btn">{{ 'Create Ticket'|trans }}</button>
 						</div>
@@ -113,6 +200,10 @@
 			</section>
 		</div>
 	</div>
+
+	    {% if user_service.isfileExists('apps/uvdesk/form-component') %}
+            {{ include('@_uvdesk_extension_uvdesk_form_component/CustomFields/customFieldValidation.html.twig') }} 
+        {% endif %}
 {% endblock %}
 
 {% block footer %}
@@ -132,13 +223,12 @@
 					$('label[for="' + value + '"]').parent().hide();
 				});
 			{% endif %}
-
 			var CreateTicketModel = Backbone.Model.extend({
 				idAttribute : "id",
 				defaults : {
 					path : "",
 				},
-				validation: {
+				validation: _.extend(customFieldValidation, {
 					{% if not isTicketViewPage %}
 						'name' : {
 							required : true,
@@ -176,10 +266,9 @@
                             msg : '{{ "Please select CAPTCHA"|trans }}'
                         }
 				    {% endif %}
-				},
+				}),
 				urlRoot : "{{ path('helpdesk_customer_create_ticket') }}"
 			});
-
 			var CreateTicketForm = Backbone.View.extend({
 				initialize : function() {
 					Backbone.Validation.bind(this);
@@ -203,7 +292,6 @@
 					var currentElement = Backbone.$(e.currentTarget);
 					var data = currentElement.closest('form').serializeObject();
 					this.model.set(data);
-
 					if(this.model.isValid(true)) {
 						$('#create-ticket-form').submit();
 						$('form').find('#create-ticket-btn').attr('disabled', 'disabled');
@@ -215,7 +303,6 @@
 					this.$('.dependency' + dependentFields).show();
 				}
 			});
-
 			var createticketForm = new CreateTicketForm({
 				el : $("#create-ticket-form"),
 				model : new CreateTicketModel()
diff --git a/Resources/views/Knowledgebase/ticketList.html.twig b/Resources/views/Knowledgebase/ticketList.html.twig
index e51ecf2..fb63e14 100644
--- a/Resources/views/Knowledgebase/ticketList.html.twig
+++ b/Resources/views/Knowledgebase/ticketList.html.twig
@@ -31,6 +31,50 @@
 		.uv-table td a {
 			color: #333;
 		}
+		.announcement {
+			background-color:green;
+			margin-bottom:10px; 
+			border-radius:3px;
+			height: 48px; 
+			padding: 10px;
+		}
+		.announcement_para {
+			color: #fff;
+			float: left;
+			font-style: normal;
+			font-weight: 500;
+			font-size: 16px;
+			line-height: 17px;
+		}
+		.announcement_remove {
+			border-radius:50%; 
+			float:right; 
+			cursor:pointer;
+			border: 2px solid #fff; 
+			width: 26px; 
+			padding-left: 7px; 
+			padding-bottom: 3px;
+		}
+		.announcement_btn_rgt {
+			float: right;
+			font-weight:bold;
+			background: #FFFFFF;
+			cursor: pointer;
+			color: #2B6BE3;
+			padding: 4px;
+			border-radius: 3px; 
+			margin-right: 36px;
+		}
+		.announcement_btn_left {
+			float: left;
+			background: #EFC556;
+			font-weight:bold;
+			cursor: pointer;
+			font: Source Sans Pro;
+			padding: 4px;
+			border-radius: 4px;
+			margin-right: 10px;
+		}
 	</style>
 	
 	<div class="uv-nav-tab-view">
@@ -79,6 +123,18 @@
 	</div>
 	<!--//Action Bar-->
 
+	<!-- Announcement Section-->
+	{% for announcement in groupAnnouncement %}
+		<div class="announcement" id= "uv-kb-info-announcement_{{ announcement.id }}">
+			<a class="announcement_btn_left" style="background:{{ announcement.tagColor }} !important; color:#333333 !important" href="#">{{ announcement.title }}</a>
+			<p class="announcement_para">{{ announcement.promoText }}</p>
+			<a class ="announcement_remove" style="color: #fff !important;" onclick="document.getElementById('uv-kb-info-announcement_{{ announcement.id }}').remove()">x</a>
+			<a class="announcement_btn_rgt" target="_blank" href="{{ announcement.linkUrl }}">{{ announcement.linkText }}</a>
+		</div>
+    {% endfor %}
+	<div class="uv-hl-ring"></div>
+	<!-- Announcement Section-->
+
 	<div class="uv-table uv-list-view">
 		<table>
 			<thead>
diff --git a/Resources/views/Knowledgebase/ticketView.html.twig b/Resources/views/Knowledgebase/ticketView.html.twig
index 4695831..52ed1cb 100644
--- a/Resources/views/Knowledgebase/ticketView.html.twig
+++ b/Resources/views/Knowledgebase/ticketView.html.twig
@@ -135,7 +135,7 @@
             display: inline-block;
             width: 20px;
             height: 20px;
-            background-image: url('../../../../../bundles/webkuldefault/images/uvdesk-kb-sprite.svg');
+            background-image: url("{{ asset('bundles/uvdeskcoreframework/images/uvdesk-kb-sprite.svg') }}");
             background-position: -176px -91px;
             vertical-align: middle;
         }
@@ -223,20 +223,8 @@
                     </div>
                 {% endif %}
             </aside>
-            {% if customFieldCollection is defined %}
-                <aside id="uv-customfield-view" class="uv-customfield-view" style="margin-top: 20px;">
-                    <div style="position: relative;">
-                        <h6>{{ 'Custom Field'|trans }}</h6>
-                        <span class="uv-customize cfield-manage-pta" style="width: 15px; height: 15px; position: absolute; background-image: url('../../../../../bundles/webkuldefault/images/uvdesk-sprite.svg'); background-position: -44px -46px; top: 4px; cursor: pointer;" title="{{ 'Manage Ticket Custom Fields'|trans }}" data-toggle="tooltip" data-placement="bottom"></span>
-                    </div>
-                    <p style="padding-right: 20px; color: #6F6F6F; font-style: italic;">{{ 'Manage Custom Fields to provide additional details with the ticket.'|trans }}</p>
-
-                    <div class="uv-hr"></div>
-                    <form name="customFieldForm" enctype="multipart/form-data">
-                        <div id="customFieldCollection">
-                        </div>
-                    </form>
-                </aside>
+            {% if user_service.isfileExists('apps/uvdesk/form-component') %}
+                {{ user_service.getCustomFieldTemplateCustomer() | raw }}
             {% endif %}
         </div>
         <div class="uv-thread-rt">
diff --git a/Resources/views/Staff/Announcement/announcementForm.html.twig b/Resources/views/Staff/Announcement/announcementForm.html.twig
new file mode 100644
index 0000000..e6f7f5d
--- /dev/null
+++ b/Resources/views/Staff/Announcement/announcementForm.html.twig
@@ -0,0 +1,257 @@
+{% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}
+
+{% block title %}{{ 'Marketing Announcement'|trans }}{% endblock %}
+
+{% block pageContent %}
+	<style>
+		.uv-color-field {
+			color: #fff;
+			width: 100px;
+			text-transform: uppercase;
+		}
+	</style>
+	<div class="uv-inner-section">
+        {# Append Panel Aside #}
+		{% set asideTemplate = 'Webkul\\UVDesk\\CoreFrameworkBundle\\Dashboard\\AsideTemplate' %}
+		{% set asideSidebarReference = 'Webkul\\UVDesk\\SupportCenterBundle\\UIComponents\\Dashboard\\Panel\\Sidebars\\Knowledgebase' %}
+
+		{{ uvdesk_extensibles.getRegisteredComponent(asideTemplate).renderSidebar(asideSidebarReference) | raw }}
+		
+		<div class="uv-view {% if app.request.cookies and app.request.cookies.get('uv-asideView') %}uv-aside-view{% endif %}">
+			<h1>
+				{% if announcement.id %}
+					{{ 'Edit Announcement'|trans }}
+				{% else %}
+					{{ 'Add Announcement'|trans }}
+				{% endif %}
+			</h1>
+			
+			<!--Form-->
+			<form method="post" action="" id="announcement-form">
+				<!-- Field -->
+				<div class="uv-element-block">
+					<label class="uv-field-label">{{ 'Title'|trans }}</label>
+					<div class="uv-field-block">
+						<input type="text" name="announcement_form[title]" class="uv-field" value="{{ announcement.title }}" />
+					</div>
+					<span class="uv-field-info"></span>
+				</div>
+				<!-- //Field -->
+
+				<!-- Field -->
+				<div class="uv-element-block">
+					<label class="uv-field-label">{{ 'Promo Text'|trans }}</label>
+					<div class="uv-field-block">
+						<textarea name="announcement_form[promotext]" class="uv-field">{{ announcement.promoText }}</textarea>
+					</div>
+					<span class="uv-field-info"></span>
+				</div>
+				<!-- //Field -->
+
+				<!-- Field -->
+				<div class="uv-element-block">
+					<label class="uv-field-label">Promo Tag</label>
+					<div class="uv-field-block">
+						<select name="announcement_form[promotag]" class="uv-select">
+							<option value="new" {% if announcement.promotag == "new" %}selected{% endif %}>New</option>
+							<option value="update" {% if announcement.promotag == "update" %}selected{% endif %}>Update</option>
+							<option value="offer" {% if announcement.promotag == "offer" %}selected{% endif %}>Offer</option>
+						</select>
+					</div>
+					<span class="uv-field-info">Choose a promo tag</span>
+				</div>
+				<!-- //Field -->
+
+				<!-- Field -->
+				<div class="uv-element-block">
+					<label class="uv-field-label">Tag-Color</label>
+					<div class="uv-field-block">
+						<input type="text" name="announcement_form[tagColor]" class="uv-field uv-color-field" value="{{ announcement.tagColor }}" />
+					</div>
+					<span class="uv-field-info">Tag background color</span>
+				</div>
+				<!-- //Field -->
+
+				<!-- Field -->
+				<div class="uv-element-block">
+					<label class="uv-field-label">Link Text</label>
+					<div class="uv-field-block">
+						<input type="text" name="announcement_form[linkText]" class="uv-field" value="{{ announcement.linkText }}" />
+					</div>
+					<span class="uv-field-info"></span>
+				</div>
+				<!-- //Field -->
+
+				<!-- Field -->
+				<div class="uv-element-block">
+					<label class="uv-field-label">Link URL</label>
+					<div class="uv-field-block">
+						<input type="text" name="announcement_form[linkURL]" class="uv-field" value="{{ announcement.linkURL }}" placeholder="https://example.com/" />
+					</div>
+					<span class="uv-field-info"></span>
+				</div>
+				<!-- //Field -->
+
+				<!-- Field -->
+				<div class="uv-element-block">
+					<label class="uv-field-label">Status</label>
+					<div class="uv-field-block">
+						<select name="announcement_form[status]" class="uv-select">
+							<option value="1" {% if announcement.isActive == "1" %}selected{% endif %}>Publish</option>
+							<option value="0" {% if announcement.isActive == "0" %}selected{% endif %}>Draft</option>
+						</select>
+					</div>
+					<span class="uv-field-info">Choose a status</span>
+				</div>
+				<!-- //Field -->
+
+				<!-- Field -->
+				<div class="uv-element-block">
+					<label class="uv-field-label">Groups</label>
+					<div class="uv-field-block">
+						<select name="announcement_form[group]" class="uv-select">
+							{% for group in user_service.getSupportGroups() %}
+								{% if announcement.id is not null %}
+									<option value="{{group.id}}" 
+									{% if (announcement.group.id == group.id) %}selected{% endif %}
+									>{{group.name}}</option>
+								{% else %}
+									<option value="{{group.id}}"
+									>{{group.name}}</option>
+								{% endif %}
+							{% endfor %}
+						</select>
+					</div>
+					<span class="uv-field-info">Choose a group</span>
+				</div>
+				<!-- //Field -->
+
+				<!--CTA-->
+				<input class="uv-btn" href="#" value="{{ 'Save Advertisement'|trans }}" type="submit">
+				<!--//CTA-->
+			</form>
+			<!--//Form-->
+		</div>
+	</div>
+{% endblock %}
+
+{% block footer %}
+	{{ parent() }}
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.0/css/bootstrap-colorpicker.min.css">
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.0/js/bootstrap-colorpicker.min.js"></script>
+
+	<script type="text/javascript">
+		$(function () {
+			$('.uv-color-field').colorpicker({format: "hex"}).on('changeColor', function(ev) {
+                $(this).css('background', $(this).val())
+                textColor = app.appView.getTextColorBasedBackground($(this).val());
+                $(this).css('color', textColor)
+            });
+
+			var AnnouncementModel = Backbone.Model.extend({
+				validation: {
+					'announcement_form[title]':[{
+						required: true,
+						msg: "{{ 'This field is mandatory'|trans }}"
+					},{
+                        maxLength: 16,
+                        msg: '{{ "Maximum character length is 16" | trans}}'
+                    }],
+					'announcement_form[promotext]': [{
+						required: true,
+						msg: "{{ 'This field is mandatory'|trans }}"
+					},{
+                        maxLength: 80,
+                        msg: '{{ "Maximum character length is 80" | trans}}'
+                    }],
+					'announcement_form[promotag]': {
+						required: true,
+						msg: "{{ 'This field is mandatory'|trans }}"
+					},
+					'announcement_form[linkText]': [{
+						required: true,
+						msg: "{{ 'This field is mandatory'|trans }}"
+					},{
+                        maxLength: 16,
+                        msg: '{{ "Maximum character length is 16" | trans}}'
+                    }],
+					'announcement_form[linkURL]': {
+						required: true,
+						msg: "{{ 'This field is mandatory'|trans }}"
+					},
+					'announcement_form[status]': {
+						required: true,
+						msg: "{{ 'This field is mandatory'|trans }}"
+					},
+					'announcement_form[group]': {
+						required: true,
+						msg: "{{ 'This field is mandatory'|trans }}"
+					}
+				}
+			});
+
+			var AnnouncementForm = Backbone.View.extend({
+				events : {
+					'click .uv-btn': "savePromotion"
+				},
+				initialize : function() {
+					$('.uv-color-field').each(function() {
+                        textColor = app.appView.getTextColorBasedBackground($(this).val());
+                        $(this).css('color', textColor)
+                    });
+
+					Backbone.Validation.bind(this);
+					var jsonContext = '';
+		    		for (var field in jsonContext) {
+		    			Backbone.Validation.callbacks.invalid(this, field, jsonContext[field], 'input');
+					}
+				},
+				formChanegd: function(e) {
+			    	// this.model.set(Backbone.$(e.currentTarget).attr('title'), Backbone.$(e.currentTarget).val())
+			    	// this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
+			    },
+				savePromotion : function (e) {
+					debugger
+					e.preventDefault();
+			        this.model.set(this.$el.serializeObject());
+					if(this.model.isValid(true)) {
+						this.$el.find('.uv-btn').attr('disabled', 'disabled');
+						this.$el.submit();
+			        }
+				},
+                setAddedIds: function(selector) {
+                    var ids = [];
+                    $(selector).find('.uv-filtered-tags .uv-btn-small').each(function() {
+                        ids.push($(this).attr('data-id'))
+                    });
+
+                    $(selector).find("input[type='hidden']").val(ids.join(','))
+
+					return ids;
+                },
+                addEntity: function(e) {
+                    currentElement = Backbone.$(e.currentTarget);
+                    if(id = currentElement.attr("data-id")) {
+                        parent = currentElement.parents(".uv-field-block");
+                        parent.find('input').val('')
+                        parent.find("li:not(.uv-no-results)").show()
+                        if(!parent.find(".uv-filtered-tags a[data-id='" + id + "']").length) {
+                            parent.find('.uv-filtered-tags').append("<a class='uv-btn-small default' href='#' data-id='" + id + "'>"+currentElement.text()+"<span class='uv-icon-remove'></span></a>")
+                            this.setAddedIds("#" + parent.attr('id'))
+                        }
+                    }
+                },
+                removeEntity: function(e) {
+                    var parent = Backbone.$(e.currentTarget).parents(".uv-field-block")
+                    Backbone.$(e.currentTarget).remove()
+                    this.setAddedIds("#" + parent.attr('id'))
+                }
+			});
+
+			announcementForm = new AnnouncementForm({
+				el : $("#announcement-form"),
+				model : new AnnouncementModel()
+			});	
+		});
+	</script>
+{% endblock %}
\ No newline at end of file
diff --git a/Resources/views/Staff/Announcement/listAnnouncement.html.twig b/Resources/views/Staff/Announcement/listAnnouncement.html.twig
new file mode 100644
index 0000000..cded3a4
--- /dev/null
+++ b/Resources/views/Staff/Announcement/listAnnouncement.html.twig
@@ -0,0 +1,313 @@
+{% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}
+
+{% block title %}
+	{{ 'Marketing Announcement'|trans }}
+{% endblock %}
+
+{% block pageContent %}
+
+	<div class="uv-inner-section">
+		{# Append Panel Aside #}
+		{% set asideTemplate = 'Webkul\\UVDesk\\CoreFrameworkBundle\\Dashboard\\AsideTemplate' %}
+		{% set asideSidebarReference = 'Webkul\\UVDesk\\SupportCenterBundle\\UIComponents\\Dashboard\\Panel\\Sidebars\\Knowledgebase' %}
+
+		{{ uvdesk_extensibles.getRegisteredComponent(asideTemplate).renderSidebar(asideSidebarReference) | raw }}
+
+		<div class="uv-view {% if app.request.cookies and app.request.cookies.get('uv-asideView') %}uv-aside-view{% endif %}">
+			<h1>
+				{{ 'Marketing Announcement'|trans }}
+			</h1>
+			<div class="uv-action-bar">
+                <div class="uv-action-bar-col-lt">
+                    <!--Sort by-->
+                    <div class="uv-dropdown sort">
+                        <div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">
+                            {{ 'Sort By:'|trans }} {{ 'Created At'|trans }}
+                        </div>
+                        <div class="uv-dropdown-list uv-bottom-left">
+							<div class="uv-dropdown-container">
+								<label>{{ 'Sort By'|trans }}</label>
+								<ul>
+								</ul>
+							</div>
+                        </div>
+                    </div>
+                    <!--Sort by-->
+
+                    <!--Filter By Status-->
+                    <div class="uv-dropdown filter-by-status">
+                        <div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">
+                            {{ 'Status:'|trans }} {{ 'All'|trans }}
+                        </div>
+                        <div class="uv-dropdown-list uv-bottom-left">
+							<div class="uv-dropdown-container">
+								<label>{{ 'Status'|trans }}</label>
+								<ul>
+									<li class="uv-drop-list-active"><a href="#">{{ 'All'|trans }}</a></li>
+									<li><a href="#" data-id="1">{{ 'Active'|trans }}</a></li>
+									<li><a href="#" data-id="0">{{ 'Disabled'|trans }}</a></li>
+								</ul>
+							</div>
+                        </div>
+                    </div>
+                    <!--//Filter By Status-->
+                </div>
+				<div class="uv-action-bar-col-rt">
+					<input type="text" class="uv-search-inline uv-vertical-align uv-margin-right-15" placeholder="{{ 'Search'|trans }}">
+					<!-- Add Button -->
+					<a href="{{ path('helpdesk_member_knowledgebase_create_marketing_announcement') }}" type="button" class="uv-btn-action">
+						<span class="uv-icon-add"></span>
+						{{ "New Announcement"|trans }}
+					</a>
+					<!--// Add Button -->
+				</div>
+            </div>
+            <!--//Action Bar-->
+
+            <div class="uv-table uv-list-view">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>{{ "Name"|trans }}</th>
+							<th>{{ "Group"|trans }}</th>
+                            <th>{{ "Advertisment"|trans }}</th>
+                            <th>{{ "Status"|trans }}</th>
+                            <th class="uv-last">{{ "Action"|trans }}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    </tbody>
+                </table>
+				<div class="navigation"></div>
+            </div>
+		</div>
+	</div>
+{% endblock %}
+
+{% block footer %}
+	{{ parent() }}
+
+	<!-- Sorting Template -->
+	<script id="announcement_list_sorting_tmp" type="text/template">
+        <li class="<% if(sort == 'a.createdAt') { %>uv-drop-list-active<% } %>">
+            <a href="#<% if(queryString != '') { %><%= queryString %>/<% } %><% if(page) { %>page/<%= page %><% } else { %>page/1<% } %>/sort/a.createdAt/<% if(sort == 'a.createdAt') { %><% if(direction) { %>direction/<%= direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="a.createdAt">
+				{% trans %}Created At{% endtrans %}
+				<% if(sort == 'a.createdAt') { %>
+					<span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
+				<% } %>
+			</a>
+        </li>
+
+	    <li class="<% if(sort == 'a.title') { %>uv-drop-list-active<% } %>">
+            <a href="#<% if(queryString != '') { %><%= queryString %>/<% } %><% if(page) { %>page/<%= page %><% } else { %>page/1<% } %>/sort/a.title/<% if(sort == 'a.title') { %><% if(direction) { %>direction/<%= direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="a.title">
+				{% trans %}Name{% endtrans %}
+				<% if(sort == 'a.title') { %>
+					<span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
+				<% } %>
+			</a>
+        </li>
+	</script>
+	<!-- //Sorting Template -->
+
+	<!-- Team list item template -->
+	<script id="announcement_list_item_tmp" type="text/template">
+		<td data-value="{{ 'Name'|trans }}">
+			<%- title %>
+		</td>
+		<td data-value="{{ 'Group'|trans }}">
+			<%- group.name %>
+		</td>
+		<td data-value="{{ 'Advertisment'|trans }}"><%- promoText %></td>
+		<td data-value="{{ 'Status'|trans }}">
+			<% if(isActive) { %>
+            	<span class="uv-text-success">{{ 'Active'|trans }}</span>
+            <% } else { %>
+            	<span class="uv-text-danger">{{ 'Disabled'|trans }}</span>
+        	<% } %>
+		</td>
+		<td data-value="{{ 'Action'|trans }}" class="uv-last">
+			<a href="<%= path.replace('replaceId', id) %>" class="uv-btn-stroke edit-team">
+				{{ "Edit"|trans }}
+			</a>
+			<div class="uv-btn-stroke delete-team">
+				{{ "Delete"|trans }}
+			</div>
+		</td>
+    </script>
+	<!-- //Team list item template -->
+
+	<script type="text/javascript">
+		var path = "{{ path('helpdesk_member_knowledgebase_update_marketing_announcement', {'announcementId': 'replaceId' }) }}";
+
+		$(function () {
+			var globalMessageResponse = "";
+
+			var TeamModel = Backbone.Model.extend({
+				idAttribute : "id"
+			});
+
+			var AnnouncementCollection = AppCollection.extend({
+				model : TeamModel,
+				url : "{{ path('helpdesk_member_knowledgebase_marketing_announcement_xhr') }}",
+				filterParameters : {
+					"isActive" : "",
+					"search" : ""
+				},
+				parseRecords: function (resp, options) {
+					return resp.groups;
+				},
+				syncData : function() {
+					app.appView.showLoader();
+					this.fetch({
+						data : this.getValidParameters(),
+						reset: true,
+						success: function(model, response) {
+							app.appView.hideLoader();
+							var teamListView = new AnnouncementList();
+							app.pager.paginationData = response.pagination_data;
+
+							var url = app.pager.paginationData.url;
+							if(teamCollection.length == 0 && app.pager.paginationData.current != "0")
+								router.navigate(url.replace('replacePage', app.pager.paginationData.last),{trigger: true});
+							else {
+								app.pager.render();
+							}
+							if(globalMessageResponse)
+								app.appView.renderResponseAlert(globalMessageResponse);
+							globalMessageResponse = null;
+						},
+						error: function (model, xhr, options) {
+							if(url = xhr.getResponseHeader('Location'))
+								window.location = url;
+						}
+					});
+				}
+			});
+
+			var AnnouncementItem = Backbone.View.extend({
+				tagName : "tr",
+				template : _.template($("#announcement_list_item_tmp").html()),
+				events : {
+					'click .delete-team' : "confirmRemove"
+				},
+				render : function() {
+					this.$el.html(this.template(this.model.toJSON()));
+					return this;
+				},
+				unrender : function(response) {
+					if(response.alertMessage != undefined) {
+						teamCollection.syncData();
+						app.appView.renderResponseAlert(response)
+					}
+				},
+				confirmRemove: function(e) {
+					e.preventDefault();
+					app.appView.openConfirmModal(this)
+				},
+				removeItem : function (e) {
+					app.appView.showLoader();
+					self = this;
+					this.model.destroy({
+						url : "{{ path('helpdesk_member_knowledgebase_remove_marketing_announcement_xhr') }}/"+this.model.get('announcementId'),
+						success : function (model, response, options) {
+							app.appView.hideLoader();
+							globalMessageResponse = response;
+							teamCollection.syncData();
+						},
+						error: function (model, xhr, options) {
+							if(url = xhr.getResponseHeader('Location'))
+								window.location = url;
+							var response = warningResponse;
+							if(xhr.responseJSON)
+								response = xhr.responseJSON;
+
+							app.appView.hideLoader();
+							app.appView.renderResponseAlert(response);
+						}
+					});
+				}
+			});
+
+			var AnnouncementList = Backbone.View.extend({
+				el : $(".uv-list-view table tbody"),
+				initialize : function() {
+					this.render();
+				},
+				render : function () {
+					this.$el.find("tr").remove();
+					if(teamCollection.length) {
+						_.each(teamCollection.models, function (item) {
+							this.renderTeam(item);
+						}, this);
+					} else {
+						this.$el.append("<tr style='text-align: center;'><td colspan='5'>{% trans %}No Record Found{% endtrans %}</td></tr>")
+					}
+				},
+				renderTeam : function (item) {
+					var teamItem = new AnnouncementItem({
+						model: item
+					});
+					this.$el.append(teamItem.render().el);
+				}
+			});
+
+			var Filter = app.Filter.extend({
+				defaultSortIndex: 'a.createdAt',
+				sortText: "{% trans %}Sort By:{% endtrans %} ",
+				defaultSortText: "{% trans %}Sort By:{% endtrans %} {% trans %}Created At{% endtrans %}",
+				template : _.template($("#announcement_list_sorting_tmp").html())
+			})
+
+			var teamCollection = new AnnouncementCollection();
+
+			var filter = new Filter({
+				collection : teamCollection
+			});
+
+			Router = Backbone.Router.extend({
+				routes: {
+					'page/:number(/sort/:sortField)(/direction/:order)' : 'paginate',
+					'isActive/:status(/search/:query)(/page/:number)(/sort/:sortField)(/direction/:order)' : 'filterTeamByStatus',
+					'search/:query(/page/:number)(/sort/:sortField)(/direction/:order)' : 'filterByQuery',
+					'' : 'initializeList'
+				},
+				initializeList : function() {
+					this.resetParams('', '');
+					teamCollection.state.currentPage = null;
+					filter.sortCollection();
+					teamCollection.syncData();
+				},
+				paginate : function(number,sortField,order) {
+					this.resetParams('', '');
+					teamCollection.state.currentPage = number;
+					filter.sortCollection(sortField,order);
+					teamCollection.syncData();
+				},
+				filterTeamByStatus: function(status,query,number,sortField,order) {
+					this.resetParams(status,query);
+					teamCollection.state.currentPage = number;
+					filter.sortCollection(sortField,order);
+					teamCollection.syncData();
+				},
+				filterByQuery : function(query,number,sortField,order) {
+					this.resetParams('',query);
+					teamCollection.state.currentPage = number;
+					filter.sortCollection(sortField,order);
+					teamCollection.syncData();
+				},
+				resetParams : function(status, query) {
+					if(query != null)
+						query = query.replace(/\+/g,' ');
+					teamCollection.filterParameters.isActive = status;
+					var statusText = status ? $(".filter-by-status a[data-id='" + status + "']").text() : "{% trans %}All{% endtrans %}";
+					$(".filter-by-status .uv-dropdown-btn").text("{% trans %}Status:{% endtrans %} " + statusText);
+					teamCollection.filterParameters.search = query;
+					$(".uv-search-inline").val(query);
+				}
+			});
+
+			router = new Router();
+			Backbone.history.start({push_state:true});
+		});
+	</script>
+{% endblock %}
diff --git a/Resources/views/Staff/branding.html.twig b/Resources/views/Staff/branding.html.twig
index a88d74c..b571f2c 100644
--- a/Resources/views/Staff/branding.html.twig
+++ b/Resources/views/Staff/branding.html.twig
@@ -748,10 +748,14 @@
             
             var BroadcastModel = Backbone.Model.extend({
 			    validation: {
-			    	'broadcasting[message]': {
+			    	'broadcasting[message]': [{
 				      	required: true,
 				       	msg: '{{ "This field is mandatory"|trans }}'
 				    },
+                    {
+						maxLength: 300,
+						msg: '{{ "This field should contains maximum 300 characters."|trans }}'
+					}],
 			    }
 			});
 
diff --git a/UIComponents/Dashboard/Homepage/Items/Announcement.php b/UIComponents/Dashboard/Homepage/Items/Announcement.php
new file mode 100644
index 0000000..7088892
--- /dev/null
+++ b/UIComponents/Dashboard/Homepage/Items/Announcement.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace Webkul\UVDesk\SupportCenterBundle\UIComponents\Dashboard\Homepage\Items;
+
+use Webkul\UVDesk\CoreFrameworkBundle\Dashboard\Segments\HomepageSectionItem;
+use Webkul\UVDesk\SupportCenterBundle\UIComponents\Dashboard\Homepage\Sections\Knowledgebase;
+
+class Announcement extends HomepageSectionItem
+{
+    CONST SVG = <<<SVG
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="60px" viewBox="0 0 60 60">
+    <path fill-rule="evenodd" d="M42.935,14.247A4.683,4.683,0,0,0,39,12H11a5.182,5.182,0,0,0-5.015,5.313V43.74A5.164,5.164,0,0,0,11.036,49l27.782,0.026a4.972,4.972,0,0,0,4.117-2.22L53.972,30.526Z"></path>
+</svg>
+SVG;
+
+    public static function getIcon() : string
+    {
+        return self::SVG;
+    }
+
+    public static function getTitle() : string
+    {
+        return "Marketing Announcement";
+    }
+
+    public static function getRoles() : array
+    {
+        return ['ROLE_AGENT_MANAGE_MARKETING_ANNOUNCEMENT'];
+    }
+
+    public static function getRouteName() : string
+    {
+        return 'helpdesk_member_knowledgebase_marketing_announcement';
+    }
+
+    public static function getSectionReferenceId() : string
+    {
+        return Knowledgebase::class;
+    }
+}
diff --git a/UIComponents/Dashboard/Panel/Items/Knowledgebase/Announcement.php b/UIComponents/Dashboard/Panel/Items/Knowledgebase/Announcement.php
new file mode 100644
index 0000000..6652d2c
--- /dev/null
+++ b/UIComponents/Dashboard/Panel/Items/Knowledgebase/Announcement.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace Webkul\UVDesk\SupportCenterBundle\UIComponents\Dashboard\Panel\Items\Knowledgebase;
+
+use Webkul\UVDesk\CoreFrameworkBundle\Dashboard\Segments\PanelSidebarItemInterface;
+use Webkul\UVDesk\SupportCenterBundle\UIComponents\Dashboard\Panel\Sidebars\Knowledgebase;
+
+class Announcement implements PanelSidebarItemInterface
+{
+    public static function getTitle() : string
+    {
+        return "Announcement";
+    }
+
+    public static function getRouteName() : string
+    {
+        return 'helpdesk_member_knowledgebase_marketing_announcement';
+    }
+
+    public static function getSupportedRoutes() : array
+    {
+        return [
+            'helpdesk_member_knowledgebase_create_marketing_announcement',
+            'helpdesk_member_knowledgebase_update_marketing_announcement', 
+            'helpdesk_member_knowledgebase_marketing_announcement',
+        ];
+    }
+
+    public static function getRoles() : array
+    {
+        return ['ROLE_AGENT_MANAGE_KNOWLEDGEBASE'];
+    }
+
+    public static function getSidebarReferenceId() : string
+    {
+        return Knowledgebase::class;
+    }
+}
diff --git a/UIComponents/Dashboard/Search/Announcement.php b/UIComponents/Dashboard/Search/Announcement.php
new file mode 100644
index 0000000..c64da40
--- /dev/null
+++ b/UIComponents/Dashboard/Search/Announcement.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace Webkul\UVDesk\SupportCenterBundle\UIComponents\Dashboard\Search;
+
+use Webkul\UVDesk\CoreFrameworkBundle\Dashboard\Segments\SearchItemInterface;
+use Symfony\Component\Translation\Translator;
+use Symfony\Component\Translation\Loader\YamlFileLoader;
+use Symfony\Component\HttpFoundation\Request;
+
+class Announcement implements SearchItemInterface
+{
+    CONST SVG = <<<SVG
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 60 60">
+    <path fill-rule="evenodd" d="M42.935,14.247A4.683,4.683,0,0,0,39,12H11a5.182,5.182,0,0,0-5.015,5.313V43.74A5.164,5.164,0,0,0,11.036,49l27.782,0.026a4.972,4.972,0,0,0,4.117-2.22L53.972,30.526Z"></path>
+</svg>
+SVG;
+
+    public static function getIcon() : string
+    {
+        return self::SVG;
+    }
+
+    public static function getTitle() : string
+    {
+        return "Marketing Announcement";
+    }
+
+    public static function getRouteName() : string
+    {
+        return 'helpdesk_member_knowledgebase_marketing_announcement';
+    }
+
+    public static function getRoles() : array
+    {
+        return ['ROLE_AGENT_MANAGE_MARKETING_ANNOUNCEMENT'];
+    }
+
+    public function getChildrenRoutes() : array
+    {
+        return [];
+    }
+}
diff --git a/composer.json b/composer.json
index 174d2bd..f6c131b 100644
--- a/composer.json
+++ b/composer.json
@@ -18,7 +18,10 @@
         "psr-4": { "Webkul\\UVDesk\\SupportCenterBundle\\": "" }
     },
     "extra": {
-        "uvdesk-package-extension": "Webkul\\UVDesk\\SupportCenterBundle\\Package\\Composer"
+        "uvdesk-package-extension": "Webkul\\UVDesk\\SupportCenterBundle\\Package\\Composer",
+        "branch-alias": {
+            "dev-master": "1.0.x-dev"
+        }
     },
     "minimum-stability": "stable"
 }