diff --git a/.eslintrc.js b/.eslintrc.js
index 514c3ee..aced9fe 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -30,7 +30,9 @@ module.exports = {
     'max-len': ['error', {
       code: 200,
       ignoreComments: true,
+      ignoreTemplateLiterals: true,
       ignoreStrings: true,
+      ignorePattern: 'd="([\\s\\S]*?)"',
       ignoreRegExpLiterals: true,
     }],
     'vue/order-in-components': ['error', {
diff --git a/src/assets/css/base.css b/src/assets/css/base.css
index af99fd4..7fb1ac2 100755
--- a/src/assets/css/base.css
+++ b/src/assets/css/base.css
@@ -161,7 +161,7 @@ table {
 ================================================== */
 
 body {
-  background-color: #fff;
+  background-color: #F1F2F4;
   font-size: 14px;
   line-height: 27px;
   color: #666;
@@ -221,7 +221,7 @@ a.menu-trigger,
 .category-small-box span,
 .testimonial,
 .testimonial p {
-  font-family: "Montserrat", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", "Montserrat", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 /* #Margin Styles
@@ -502,7 +502,7 @@ hr {
 ================================================== */
 
 a {
-  color: #505050;
+  color: #26ae61;
   text-decoration: none;
   outline: 0;
   -webkit-transition: color 0.2s ease-in-out;
@@ -590,16 +590,27 @@ select {
   padding: 14px 18px;
   outline: none;
   font-size: 14px;
-  color: #909090;
+  color: #000000;
   margin: 0;
   max-width: 100%;
   width: 100%;
   box-sizing: border-box;
   display: block;
-  background-color: #fcfcfc;
+  background-color: #FAFAFA;
   font-weight: 500;
   border: 1px solid #e0e0e0;
   opacity: 1;
+  box-shadow: 0px 2px 4px -2px rgba(0,0,0,.065);
+}
+
+.fake-input::placeholder,
+input[type="text"]::placeholder,
+input[type="password"]::placeholder,
+input[type="email"]::placeholder,
+input[type="number"]::placeholder,
+textarea::placeholder,
+select::placeholder {
+  color: #909090;
 }
 
 select {
@@ -611,14 +622,26 @@ input[type="password"]:focus,
 input[type="email"]:focus,
 input[type="number"]:focus,
 textarea:focus {
-  color: #808080;
+  color: #000000;
+  background-color: #FFF;
   -webkit-transition: all 0.1s ease-in-out;
   -moz-transition: all 0.1s ease-in-out;
   -o-transition: all 0.1s ease-in-out;
   -ms-transition: all 0.1s ease-in-out;
   transition: all 0.1s ease-in-out;
-  border: 1px solid #d8d8d8;
+  border: 1px solid #26AE61;
+  opacity: 1;
+  box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.065) , 0px 2px 4px -2px rgba(0,0,0,.065), 0px 10px 15px -3px rgba(0,0,0,.05);
+}
+
+input[type="text"].flat:focus,
+input[type="password"].flat:focus,
+input[type="email"].flat:focus,
+input[type="number"].flat:focus,
+textarea.flat:focus {
+  border: none;
   opacity: 1;
+  box-shadow: none;
 }
 
 ::-webkit-input-placeholder {
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 88eeca1..a828199 100755
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -133,7 +133,7 @@ header.transparent .sf-with-ul::after {
 }
 
 #banner {
-  background-image: url(../images/banner.jpg);
+  
 }
 
 #banner.with-transparent-header {
@@ -147,7 +147,7 @@ header.transparent .sf-with-ul::after {
 }
 
 #banner.with-transparent-header:before {
-  background-color: rgba(42, 46, 50, 0.7);
+  /*background-color: rgba(42, 46, 50, 0.7);*/
 }
 
 header.transparent.alternative #navigation {
@@ -529,8 +529,15 @@ ul li ul a.sf-with-ul:after {
   width: 100%;
   height: 100%;
   display: inline-block;
-  background-color: rgba(42, 46, 50, 0.70);
-  position: absolute;
+  background-image: url(../images/banner.jpg);
+  background-color: #26ae61;
+  background-blend-mode: multiply;
+  background-size: 100%;
+  background-size: cover;
+
+  position: absolute;}
+
+#banner::after {
 }
 
 .search-container {
@@ -670,16 +677,24 @@ ul li ul a.sf-with-ul:after {
 ---------------------------------------------------------------------- */
 
 #titlebar {
-  background-color: #f6f6f6;
+  /* background-color: #F2F3FF; */
+
+  background-image: url(../images/banner.jpg);
+  background-color: #26ae61;
+  background-blend-mode: multiply;
+  background-size: 100%;
+  background-size: cover;
+
   position: relative;
-  padding: 70px 0px;
-  margin-bottom: 50px;
+  padding: 48px 0px;
+  margin-bottom: 24px;
+  border-bottom: 1px solid #E0E0E0;
 }
 
 #titlebar span a,
 #titlebar span {
   font-size: 18px;
-  color: #888;
+  color: #26AE61;
 }
 
 #titlebar span {
@@ -721,7 +736,9 @@ ul li ul a.sf-with-ul:after {
 }
 
 #titlebar h1,
+#titlebar h1 strong,
 #titlebar h2 {
+  color: #FFF;
   font-size: 30px;
   line-height: 40px;
 }
@@ -939,7 +956,10 @@ a.button.white {
 }
 
 a.button.centered {
-  display: table;
+  width: auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   margin: 0 auto;
 }
 
@@ -949,7 +969,13 @@ a.button.centered {
 }
 
 a.button i {
-  margin-right: 3px;
+  margin-right: 8px;
+}
+
+a.button svg {
+  margin-right: 8px;
+  width: 20px;
+  height: 20px;
 }
 
 a.button.gray.app-link.opened:hover,
@@ -2009,8 +2035,9 @@ screen and (max-height: 300px) {
 .notification.warning,
 .notification.warning a,
 .notification.warning strong {
-  background-color: #FBFADD;
-  color: #8f872e;
+  border-left: 3px solid #FFC646;
+  background-color: #FFF9ED;
+  color: #6A5026;
 }
 
 .notification.notice,
@@ -2360,6 +2387,8 @@ screen and (max-height: 300px) {
   overflow: hidden;
   padding: 0;
   width: 100%;
+
+  box-shadow: 0px 2px 4px -3px rgba(0,0,0,.1), 0px 10px 15px -3px rgba(0,0,0,.05);
 }
 
 .tabs-nav li {
@@ -2380,10 +2409,9 @@ screen and (max-height: 300px) {
 }
 
 .tabs-nav li a {
-  background-color: #f2f2f2;
-  border-right: 1px solid #fff;
-  border-bottom: 1px solid #fff;
-  color: #808080;
+  background-color: #fff;
+
+  color: #26ae61;
   font-weight: 600;
   display: block;
   letter-spacing: 0;
@@ -2523,9 +2551,12 @@ screen and (max-height: 300px) {
 ------------------------------------- */
 
 .info-banner {
-  background: #f6f6f6;
+  background: #000000;
   display: block;
   padding: 35px 38px;
+  margin-bottom: 32px;
+  border-radius: 4px;
+  box-shadow: 0px 2px 4px -3px rgba(0,0,0,.1), 0px 10px 15px -3px rgba(0,0,0,.05);
 }
 
 .info-content {
@@ -2535,7 +2566,7 @@ screen and (max-height: 300px) {
 
 .info-banner p {
   margin: 2px 0 0 0;
-  color: #888;
+  color: #26ae61;
 }
 
 .info-banner a.button {
@@ -2545,7 +2576,8 @@ screen and (max-height: 300px) {
   padding: 11px 17px;
 }
 
-.info-banner h3 {
+.info-banner h1 {
+  color: #FFF;
   font-size: 20px;
   font-weight: 500;
   line-height: 32px;
@@ -4270,7 +4302,7 @@ screen and (max-height: 300px) {
 #titlebar h1 span,
 #titlebar h2 span,
 .job-list h4 span {
-  color: #fff;
+  /*color: #fff;*/
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
@@ -4295,7 +4327,8 @@ screen and (max-height: 300px) {
 }
 
 span.full-time {
-  background-color: #186fc9;
+  color: #186fc9;
+  background-color: #f1f7fc;
 }
 
 span.part-time {
@@ -4420,19 +4453,22 @@ span.temporary {
 }
 
 .listings-container {
-  margin: 15px 0 15px 0;
+  border-radius: 4px;
+  margin: 0px 0 48px 0;
+  box-shadow: 0px 2px 4px -3px rgba(0,0,0,.1), 0px 10px 15px -3px rgba(0,0,0,.05);
 }
 
 .listing {
-  border-radius: 0;
+  border-radius: 0px;
   display: flex;
-  padding: 25px;
-  border-left: 4px solid #eee;
+  padding: 24px 32px;
   transition: 0.3s;
   position: relative;
   overflow: hidden;
-  border: 1px solid #e0e0e0;
-  margin-top: -1px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  border-bottom: 1px solid #F1F2F4;
+  background-color: #fff;
 }
 
 .listings-container .listing:first-child {
@@ -4449,6 +4485,7 @@ span.temporary {
 
 .listing:hover {
   background-color: #fafafa;
+  /*box-shadow: 0px 2px 4px -3px rgba(0,0,0,.1), 0px 10px 15px -3px rgba(0,0,0,.05);*/
 }
 
 .listing-badge {
@@ -4473,6 +4510,7 @@ span.temporary {
   transform: rotate(-45deg);
 }
 
+
 .listing.full-time {
   border-left: 4px solid #186fc9;
 }
@@ -4494,8 +4532,9 @@ span.temporary {
 }
 
 .listing .listing-logo {
-  width: 60px;
-  min-width: 60px;
+  width: 84px;
+  min-width: 84px;
+  margin-right: 32px;
   display: flex;
   align-items: center;
 }
@@ -4509,23 +4548,27 @@ span.temporary {
 
 .listing .listing-title {
   flex-wrap: wrap;
-  padding-left: 25px;
-  padding-right: 110px;
+  padding-left: 0px;
+  padding-right: 0px;
+  flex-grow: 1;
 }
 
 .listing .listing-title h4 {
   letter-spacing: 0;
-  font-size: 17px;
+  font-size: 16px;
+  font-weight: 700;
   line-height: 27px;
-  margin-bottom: 5px;
   color: #333;
 }
 
 .listing-type {
   border-radius: 3px;
+  border: 1px solid #e0e0e0;
+  white-space: nowrap;
+  text-align: center;
+
   font-size: 12px;
   background-color: #fff;
-  border: 1px solid #e0e0e0;
   color: #888;
   padding: 4px 8px;
   line-height: 18px;
@@ -4535,6 +4578,12 @@ span.temporary {
   white-space: nowrap;
   text-align: center;
   min-width: 76px;
+
+  /*position: unset;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 1px 4px 0px 4px;
+  margin-right: 12px;*/
 }
 
 @media (max-width: 767px) {
@@ -4557,8 +4606,8 @@ span.temporary {
   }
 
   .listing .listing-logo img {
-    width: 40px;
-    height: 40px;
+    width: 84px;
+    height: 84px;
   }
 }
 
@@ -4643,6 +4692,8 @@ li .job-spotlight p {
 .job-spotlight a.job-title {
   line-height: 25px;
   font-size: 18px;
+  font-weight: 700;
+  color: #000;
 }
 
 .job-spotlight .listing-type {
@@ -4662,21 +4713,25 @@ li .job-spotlight p {
 }
 
 .listing-date {
-  background-color: #fff;
-  border: 1px solid #e0e0e0;
-  color: #888;
+  background-color: #F2F2F2;
+  border: 1px solid #F2F2F2;
   display: inline-block;
   border-radius: 3px;
   font-size: 12px;
-  padding: 3px 8px;
+  padding: 2px 6px;
   line-height: 18px;
   font-weight: 500;
 }
 
+.listing-date a {
+  color: #1d4354 !important;
+  word-break: keep-all;
+}
+
 .listing-date.new {
-  border-color: #26ae62;
-  background-color: #e9fff3;
-  color: #26ae62;
+  border-color: #1d4354;
+  background-color: #F2F2F2;
+  color: #1d4354 !important;
 }
 
 .listing-details {
@@ -4686,21 +4741,28 @@ li .job-spotlight p {
 .listing-icons {
   padding: 0;
   margin: 0;
-  max-width: 95%;
   display: flex;
   flex-direction: row;
+  align-items: center;
   flex-wrap: wrap;
+  margin-bottom: 14px;
+}
+
+.listing-icons:last-child {
+  margin-bottom: 0px;
 }
 
 .listing-icons li {
-  display: inline-block;
-  margin-right: 13px;
-  color: #808080;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 20px;
   line-height: 29px;
 }
 
 .listing-icons li:last-child {
   margin-right: 0px;
+  margin-top: 0px;
 }
 
 .listing-icons li i {
@@ -4710,6 +4772,18 @@ li .job-spotlight p {
   margin: 0 4px 0 0;
 }
 
+.listing-icons li a {
+
+}
+
+.listing-icons li svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+  /*stroke: #1d4354;
+  stroke-width: 1px;*/
+}
+
 /* ---------------------------------- */
 
 /* Category Boxes
@@ -4873,10 +4947,13 @@ li .job-spotlight p {
 .job-overview,
 .job-spotlight {
   background-color: #fdfdfd;
-  border: 1px solid #e2e2e2;
+  /* border: 1px solid #e2e2e2; */
   padding: 25px 30px 20px 30px;
+  box-shadow: 0px 2px 4px -3px rgba(0,0,0,.1), 0px 10px 15px -3px rgba(0,0,0,.05);
 }
 
+#job-spotlight li:last-child { padding-bottom: 50px; }
+
 li .job-spotlight {
   line-height: 27px;
 }
@@ -5009,47 +5086,72 @@ body .job-spotlight .fa-calendar:before {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  box-sizing: border-box;
 }
 
 .feedback {
-  max-width: 440px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  
+  max-width: 16%;
   text-align: center;
   min-height: 180px;
   margin: 30px;
-  font-size: 13px;
+  font-size: 12px;
+  background-color: #FFF;
+  border-radius: 3px;
+
+  box-shadow: 0px 3px 6px -3px rgba(0, 0, 0, .06), 0px 10px 16px 0px rgba(0, 0, 0, .025);
 }
 
 .testimonial-box {
-  color: #888;
-  margin-bottom: 18px;
+  color: #595959;
+  font-size: 14px;
+  font-weight: 500;
+  flex-grow: 1;
+  margin: 16px 24px 32px 24px;
+  padding-bottom: 16px;
 }
 
 .testimonial-author {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  padding: 0px 0px 16px 0px;
+  width: 100%;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  background-color: #F5F6FF;
 }
 
 .testimonial-author-name {
-  text-align: left;
-  margin-left: 10px;
+  text-align: center;
 }
 
 .testimonial-author img {
-  width: 40px;
-  height: 40px;
+  width: 56px;
+  height: 56px;
   border-radius: 50%;
   display: inline;
+  margin-bottom: 8px;
+  margin-top: -28px;
+  background-color: #FFF;
+  box-shadow: inset 0px 3px 6px 0px rgba(0, 0, 0, .1);
 }
 
 .testimonial-author p {
-  font-size: 12px;
+  font-size: 14px;
   margin-bottom: 0;
   line-height: 20px;
+  font-weight: 500;
+  color: #67717a;
 }
 
 .testimonial-author p.name {
   font-weight: 500;
   font-size: 14px;
+  color: #67717a;
 }
 
 .testimonial-box .star-rating {
@@ -5062,7 +5164,7 @@ body .job-spotlight .fa-calendar:before {
 .fullwidth-testimonial {
   padding: 40px 0;
   padding-bottom: 55px;
-  background-color: #f9f9f9;
+  background-color: #F8FAFB;
 }
 
 h3.headline {
@@ -5077,12 +5179,22 @@ span.headline-detail {
   display: block;
 }
 
+.headline.centered svg {
+  width: 28px;
+  height: 28px;
+  stroke: 1;
+  background-color: #26ae61;
+  padding: 16px;
+  border-radius: 50%;
+  stroke: #FFF;
+  margin-right: 16px;
+}
+
 .headline.centered span {
   font-size: 18px;
   line-height: 32px;
   margin-top: 10px;
   color: #888;
-  font-weight: 300;
   display: block;
   padding: 0 15%;
 }
@@ -5092,7 +5204,11 @@ span.headline-detail {
 }
 
 .headline.centered {
-  text-align: center;
+  text-align: left;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  font-weight: 500;
 }
 
 .fullwidth-divider {
@@ -6266,7 +6382,7 @@ html[xmlns] .flexslider .slides {
 
 .pagination ul li {
   display: inline-block;
-  margin: 0;
+  margin: 0 4px;
   padding: 0;
 }
 
@@ -6276,8 +6392,8 @@ html[xmlns] .flexslider .slides {
   border-bottom: none;
   display: inline-block;
   color: #888;
-  background-color: #f2f2f2;
-  font-weight: 700;
+  background-color: #F2F2F2;
+  font-weight: 400;
   margin: 0;
   -webkit-transition: all 200ms ease-in-out;
   -moz-transition: all 200ms ease-in-out;
@@ -6292,7 +6408,7 @@ html[xmlns] .flexslider .slides {
 }
 
 .pagination ul li.blank {
-  color: #a0a0a0;
+  color: #616979;
   width: 42px;
 }
 
@@ -6317,7 +6433,7 @@ html[xmlns] .flexslider .slides {
 }
 
 .pagination-next-prev ul li a {
-  color: #888;
+  color: #212939;
   padding: 12px 16px;
   text-transform: uppercase;
 }
@@ -6445,7 +6561,7 @@ html[xmlns] .flexslider .slides {
   -webkit-transform: translateZ(10);
   -webkit-backface-visibility: hidden;
   -webkit-perspective: 1000;
-  margin-top: 20px;
+  margin-top: 24px;
   width: 50%;
 }
 
@@ -8793,6 +8909,7 @@ select {
   border: 1px solid #e0e0e0;
 }
 
+
 .multiselect {
   position: relative;
   z-index: 900;
@@ -8893,16 +9010,20 @@ select {
   border: none;
   padding: 0;
   margin: 0;
+  margin-left: 0px;
   min-height: 0px;
   max-height: none;
   height: auto;
   float: none;
   clear: both;
+  border: none;
+  box-shadow: none;
 }
 
 .multiselect.is-searchable .multiselect__content-wrapper {
-  top: 40px;
+  top: 44px;
   border-top: none;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 }
 .multiselect.is-searchable.multiselect--above .multiselect__content-wrapper {
   top: auto;
@@ -8911,8 +9032,8 @@ select {
   bottom: 40px;
 }
 .search-container .multiselect.is-searchable .multiselect__content-wrapper {
-  top: 50px;
+  top: 60px;
 }
 .search-container .multiselect.is-searchable.multiselect--above .multiselect__content-wrapper {
-  bottom: 50px;
+  bottom: 60px;
 }
diff --git a/src/assets/css/theme.css b/src/assets/css/theme.css
index 61199fd..6068f53 100755
--- a/src/assets/css/theme.css
+++ b/src/assets/css/theme.css
@@ -63,7 +63,7 @@ table.manage-table td.action a:hover,
 .widget-text h5 a:hover,
 .app-content .info span ,
 .app-content .info ul li a:hover
-{ color: #26ae61; }
+{ /*color: #26ae61; */ }
 
 .icon-box.rounded i {
 	border-color: #26ae61;
diff --git a/src/components/pages/AddJob.vue b/src/components/pages/AddJob.vue
index 8a4faa2..1275328 100644
--- a/src/components/pages/AddJob.vue
+++ b/src/components/pages/AddJob.vue
@@ -203,7 +203,7 @@ export default {
     >
       <div class="sixteen columns">
         <div class="submit-page">
-          <div class="notification notice margin-bottom-40">
+          <div class="notification warning margin-bottom-40">
             <p>
               <span>Önemli hatırlatma!</span>
               İlan ekleyebilmek için belirtmiş olduğunuz firma ismiyle uyumlu bir e-posta adresi
@@ -321,6 +321,14 @@ export default {
 </template>
 
 <style lang="scss">
+
+.submit-page {
+  background-color: #FFF;
+  border-radius: 4px;
+  padding: 24px 32px;
+  box-shadow: 0px 2px 4px -3px rgba(0,0,0,.1), 0px 10px 15px -3px rgba(0,0,0,.05);
+}
+
 .add-job {
   .button-container {
     text-align: right;
diff --git a/src/components/pages/CompanyPosts.vue b/src/components/pages/CompanyPosts.vue
index c188802..20945ad 100644
--- a/src/components/pages/CompanyPosts.vue
+++ b/src/components/pages/CompanyPosts.vue
@@ -36,19 +36,129 @@ export default {
     <div id="titlebar" v-if="!isLoading && posts.length">
       <div class="container" v-if="posts.length">
         <div class="sixteen columns">
-          <h1>
-            <strong>{{ posts[0].company.name }}</strong> firmasına ait ilanlar
-          </h1>
-          <span>Bu kriterlere uygun {{ posts.length }} ilan bulunuyor</span>
+          <div class="company-jobs">
+            <img
+              :src="posts[0].company.logo"
+              :alt="posts[0].company.name"
+              ref="logo"
+              loading="lazy"
+              @error="handleImageError"
+              class="tag-post-link"
+            >
+            <div class="company-info-text">
+              <h1>{{ posts[0].company.name }}</h1>
+              <h6>Bu firmaya ait {{ posts.length }} ilan bulunuyor</h6>
+              <div class="company-social">
+                <a target="_blank" :href="'https://twitter.com/' + posts[0].company.twitter" class="twitter-link" v-if="posts[0].company.twitter">
+                  <svg viewBox="0 0 24 24" class="r-13gxpu9 r-4qtqp9 r-yyyyoo r-16y2uox r-1q142lx r-8kz0gk r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1srniue">
+                    <g>
+                      <path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z" />
+                    </g>
+                  </svg>
+                  {{ posts[0].company.twitter }}
+                </a>
+                <a target="_blank" :href="posts[0].company.linkedin" class="linkedin-link" v-if="posts[0].company.linkedin">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                    <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
+                  </svg>
+                  {{ posts[0].company.name }}
+                </a>
+                <a target="_blank" :href="posts[0].company.www" v-if="posts[0].company.www">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+                  </svg>
+                  {{ posts[0].company.www }}
+                </a>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
     <div class="container">
-      <job-listing
-        :is-loading="isLoading"
-        :posts="posts"
-        not-found-text="Bu firmaya ait güncel ilan bulunamadı."
-      />
+      <div class="eleven columns">
+        <div class="padding-right">
+          <job-listing
+            :is-loading="isLoading"
+            :posts="posts"
+            not-found-text="Bu firmaya ait güncel ilan bulunamadı."
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+
+  .searchform-wrapper {
+    margin-top: 24px;
+    border-radius: 4px;
+    padding: 24px 32px;
+    background-color: #FFF;
+    box-shadow: 0px 2px 4px -3px rgba(0,0,0,.1), 0px 10px 15px -3px rgba(0,0,0,.05);
+  }
+
+  .company-jobs {
+    display: flex;
+    flex-direction: row;
+
+    img {
+      width: 128px;
+      height: 128px;
+      padding: 16px;
+      margin-right: 32px;
+      background-color: #FFF;
+      border-radius: 8px;
+      box-shadow: 0px 2px 4px -3px rgba(0,0,0,.1), 0px 10px 15px -3px rgba(0,0,0,.05);
+    }
+
+    .company-info-text {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      h1 {
+        color: #FFF;
+        font-size: 36px;
+        margin-bottom: 24px;
+      }
+
+      h6 {
+        color: #26AE61;
+        font-size: 24px;
+        margin-bottom: 24px;
+      }
+
+      div.company-social {
+        display: flex;
+        flex-direction: row;
+
+        a {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          margin-right: 56px;
+          font-size: 20px;
+          color: #FFF;
+
+          svg {
+            width: 24px;
+            height: 24px;
+            margin-right: 8px;
+            margin-top: -2px;
+          }
+
+          &.twitter-link {
+            svg { fill: #1DA1F2; }
+          }
+
+          &.linkedin-link {
+            svg { fill: #0077B7; }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/pages/JobDetails.vue b/src/components/pages/JobDetails.vue
index fd22edd..2bb1cb1 100644
--- a/src/components/pages/JobDetails.vue
+++ b/src/components/pages/JobDetails.vue
@@ -1,10 +1,10 @@
 <script>
 import { mapActions } from 'vuex';
-import JobTypeBadge from '../shared/JobTypeBadge';
 import JobListing from '../shared/JobListing';
 import ApplyLink from '../shared/ApplyLink';
 import Loader from '../shared/Loader';
 import image from '../../mixins/image';
+import jobDetailMixin from '../../mixins/jobDetail';
 import jobDetailsMetaInfoMixin from '../../mixins/jobDetailsMetaInfo';
 
 export default {
@@ -20,11 +20,10 @@ export default {
       default: () => ({}),
     },
   },
-  mixins: [jobDetailsMetaInfoMixin, image],
+  mixins: [jobDetailsMetaInfoMixin, image, jobDetailMixin],
   components: {
     Loader,
     ApplyLink,
-    JobTypeBadge,
     JobListing,
   },
   data() {
@@ -132,12 +131,12 @@ export default {
             <div class="container">
               <div class="ten columns">
                 <h1 itemprop="title">
-                  {{ postData.position }}
-                  <job-type-badge :post="postData" />
+                  "<strong>{{ postData.position }}</strong>" ilan detayları
+                  <!-- <job-type-badge :post="postData" /> -->
                 </h1>
               </div>
               <div class="six columns">
-                <a :href="twitterShareUrl" class="button dark" target="_blank">
+                <a :href="twitterShareUrl" class="button" target="_blank">
                   <i class="fa fa-twitter" /> Paylaş
                 </a>
               </div>
@@ -160,47 +159,85 @@ export default {
             <div :class="{ 'disabled-content': postData.status === 2 }">
               <div class="eleven columns">
                 <div class="padding-right">
-                  <div class="company-info"
-                       itemprop="hiringOrganization"
-                       itemscope itemtype="http://schema.org/Organization"
-                  >
-                    <router-link :to="`/firmalar/${postData.company.slug}`">
+                  <div class="job-full-details">
+                    <!--
+                    <div class="company-info"
+                        itemprop="hiringOrganization"
+                        itemscope itemtype="http://schema.org/Organization">
+                        <router-link :to="`/firmalar/${postData.company.slug}`">
+                          <img
+                            itemprop="logo"
+                            :src="postData.company.logo"
+                            :alt="postData.company.name"
+                            ref="logo"
+                            @error="handleImageError"
+                          >
+                        </router-link>
+                        <div class="content">
+                          <h4 itemprop="name">
+                            {{ postData.company.name }}
+                          </h4>
+                          <span>
+                            <span itemprop="sameAs" :content="postData.company.www" />
+                            <a :href="postData.company.www" target="_blank">
+                              <i class="fa fa-link" /> Website
+                            </a>
+                          </span>
+                          <span v-if="postData.company.twitter">
+                            <a :href="twitterUrl" target="_blank">
+                              <i class="fa fa-twitter" />
+                              @{{ postData.company.twitter.replace('@', '') }}
+                            </a>
+                          </span>
+                          <span v-if="postData.company.linkedin">
+                            <a :href="postData.company.linkedin" target="_blank">
+                              <i class="fa fa-linkedin" /> {{ postData.company.name }}
+                            </a>
+                          </span>
+                        </div>
+                        <div class="clearfix" />
+                    </div>
+                    -->
+                    <div class="company-jobs">
                       <img
-                        itemprop="logo"
                         :src="postData.company.logo"
                         :alt="postData.company.name"
                         ref="logo"
+                        loading="lazy"
                         @error="handleImageError"
+                        class="tag-post-link"
                       >
-                    </router-link>
-                    <div class="content">
-                      <h4 itemprop="name">
-                        {{ postData.company.name }}
-                      </h4>
-                      <span>
-                        <span itemprop="sameAs" :content="postData.company.www" />
-                        <a :href="postData.company.www" target="_blank">
-                          <i class="fa fa-link" /> Website
-                        </a>
-                      </span>
-                      <span v-if="postData.company.twitter">
-                        <a :href="twitterUrl" target="_blank">
-                          <i class="fa fa-twitter" />
-                          @{{ postData.company.twitter.replace('@', '') }}
-                        </a>
-                      </span>
-                      <span v-if="postData.company.linkedin">
-                        <a :href="postData.company.linkedin" target="_blank">
-                          <i class="fa fa-linkedin" /> {{ postData.company.name }}
-                        </a>
-                      </span>
+                      <div class="company-info-text">
+                        <h1>{{ postData.company.name }}</h1>
+                        <div class="company-social">
+                          <a target="_blank" :href="'https://twitter.com/' + postData.company.twitter" class="twitter-link" v-if="postData.company.twitter">
+                            <svg viewBox="0 0 24 24" class="r-13gxpu9 r-4qtqp9 r-yyyyoo r-16y2uox r-1q142lx r-8kz0gk r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1srniue">
+                              <g>
+                                <path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z" />
+                              </g>
+                            </svg>
+                            <!-- {{postData.company.twitter}}-->
+                          </a>
+                          <a target="_blank" :href="postData.company.linkedin" class="linkedin-link" v-if="postData.company.linkedin">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                              <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
+                            </svg>
+                            <!--{{postData.company.name}}-->
+                          </a>
+                          <a target="_blank" :href="postData.company.www" v-if="postData.company.www">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+                            </svg>
+                            {{ postData.company.www }}
+                          </a>
+                        </div>
+                      </div>
                     </div>
-                    <div class="clearfix" />
+                    <div class="job-description"
+                         itemprop="description"
+                         v-html="postData.description"
+                    />
                   </div>
-                  <div class="job-description"
-                       itemprop="description"
-                       v-html="postData.description"
-                  />
                 </div>
               </div>
               <div class="five columns">
@@ -221,6 +258,13 @@ export default {
                           <span>{{ postData.position }}</span>
                         </div>
                       </li>
+                      <li>
+                        <i class="fa fa-clock-o" />
+                        <div>
+                          <strong>Çalışma Tipi</strong>
+                          <span>{{ jobType || 'Belirtilmemiş' }}</span>
+                        </div>
+                      </li>
                       <li>
                         <i class="fa fa-map-marker" />
                         <div>
@@ -294,6 +338,83 @@ export default {
 </template>
 
 <style lang="scss">
+
+  .company-jobs {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 32px;
+
+    img {
+      width: 96px;
+      height: 96px;
+      padding: 12px;
+      margin-right: 32px;
+      background-color: #FFF;
+      border-radius: 4px;
+      border: 1px solid #f1f2f4;
+      box-shadow: 0px 2px 4px -3px rgba(0,0,0,.1), 0px 10px 15px -3px rgba(0,0,0,.05);
+    }
+
+    .company-info-text {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+
+      h1 {
+        color: #000;
+        font-size: 24px;
+        line-height: 30px;
+        margin-bottom: 16px;
+      }
+
+      h6 {
+        color: #333333;
+        font-size: 24px;
+        margin-bottom: 24px;
+      }
+
+      div.company-social {
+        display: flex;
+        flex-direction: row;
+
+        a {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          margin-right: 24px;
+          font-size: 12px;
+          font-weight: 500;
+          color: #000;
+
+          svg {
+            width: 16px;
+            height: 16px;
+            margin-right: 8px;
+            margin-top: 0px;
+          }
+
+          &.twitter-link {
+            svg { fill: #1DA1F2; }
+          }
+
+          &.linkedin-link {
+            svg { fill: #0077B7; }
+          }
+        }
+      }
+    }
+  }
+
+.job-full-details {
+  padding: 24px 32px 24px 32px;
+  margin-bottom: 48px;
+
+  border-radius: 4px;
+  background-color: #FFF;
+  box-shadow: 0px 2px 4px -3px rgba(0,0,0,.1), 0px 10px 15px -3px rgba(0,0,0,.05);
+}
+
 .job-details {
   #titlebar .listing-type {
     right: 0;
diff --git a/src/components/pages/TagPosts.vue b/src/components/pages/TagPosts.vue
index 12f40a5..d439dd6 100644
--- a/src/components/pages/TagPosts.vue
+++ b/src/components/pages/TagPosts.vue
@@ -51,7 +51,7 @@ export default {
     :is-loading="isLoading"
   >
     <h1 slot="headerText" ref="headline">
-      <strong>{{ tag }}</strong> etiketli ilanlar
+      <strong>"{{ tag }}"</strong> etiketli ilanlar
     </h1>
   </job-listing-with-filters>
 </template>
diff --git a/src/components/shared/AppBanner_v2.vue b/src/components/shared/AppBanner_v2.vue
new file mode 100644
index 0000000..3273d6f
--- /dev/null
+++ b/src/components/shared/AppBanner_v2.vue
@@ -0,0 +1,165 @@
+<script>
+import queryUtils from '../../utils/query';
+import LocationSelect from './LocationSelect';
+
+export default {
+  components: {
+    LocationSelect,
+  },
+  data() {
+    return {
+      params: {
+        query: '',
+        location: '',
+      },
+    };
+  },
+  methods: {
+    handleSearch() {
+      const params = queryUtils.getParams(this.params);
+
+      if (params) {
+        this.$router.push({ path: 'ilan-ara', query: params });
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div id="banner">
+    <div class="container">
+      <div class="sixteen columns">
+        <div class="search-container">
+          <h2>Hey 👋 senin için burada 1322 ilan var</h2>
+          <h3>Yeteneklerine göre bu ilanları aşağıdan filtreleyebilirsin.</h3>
+          <div class="inputs">
+            <input
+              v-model="params.query"
+              @keypress.enter="handleSearch"
+              type="text"
+              class="ico-01 flat"
+              placeholder="Pozisyon adı, teknoloji adı"
+            >
+            <div class="semi-border" />
+            <div class="banner--location-select">
+              <location-select
+                v-model="params.location"
+                :value="params.location"
+                :searchable="true"
+              />
+            </div>
+            <button @click="handleSearch" class="tag-search-btn">
+              <i class="fa fa-search tag-search-btn" />
+            </button>
+          </div>
+          <div class="clearfix" />
+          <div class="common-jobs">
+            <div class="browse-jobs">
+              <h5>Öne çıkan yetenekler</h5>
+              <router-link to="/etiket/frontend" class="tag-header-tags">
+                Frontend
+              </router-link>
+              <router-link to="/etiket/backend" class="tag-header-tags">
+                Backend
+              </router-link>
+              <router-link to="/etiket/mobile" class="tag-header-tags">
+                Mobile
+              </router-link>
+              <router-link to="/etiket/devops" class="tag-header-tags">
+                DevOps
+              </router-link>
+            </div>
+            <div class="browse-jobs next-line">
+              <h5>Öne çıkan şehirler</h5>
+              <router-link to="/ilan-ara?location=istanbul" class="tag-header-tags">
+                İstanbul
+              </router-link>
+              <router-link to="/ilan-ara?location=izmir" class="tag-header-tags">
+                İzmir
+              </router-link>
+              <router-link to="/ilan-ara?location=ankara" class="tag-header-tags">
+                Ankara
+              </router-link>
+              <router-link to="/ilan-ara?location=Remote" class="tag-header-tags">
+                Remote
+              </router-link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+  .banner {
+    background: none;
+  }
+
+  .search-container {
+
+    h2 {
+      margin-bottom: 12px;
+      line-height: 100%;
+    }
+
+    h3 {
+      line-height: 100%;
+      margin-bottom: 32px;
+      color: #26ae61;
+    }
+
+    h5 {
+      color: #26ae61;
+      line-height: 100%;
+      margin-bottom: 16px;
+    }
+
+    .common-jobs {
+      margin-top: 24px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+
+      .browse-jobs a {
+        padding: 0px 12px;
+        margin-right: 8px;
+
+        &:last-child { margin-right: 0px; }
+
+        &:hover {
+          border-color: transparent;
+          color: #FFF;
+          background-color: #26ae61;
+          box-shadow: 0px 2px 4px -3px rgba(0,0,0,.1), 0px 10px 15px -3px rgba(0,0,0,.05);
+        }
+      }
+
+      .browse-jobs.next-line h5 {
+        text-align: right;
+      }
+    }
+
+    .inputs {
+      padding: 8px 8px 8px 8px;
+      background-color: #fff;
+      box-shadow: 0px 2px 4px -3px rgba(0,0,0,.1), 0px 10px 15px -3px rgba(0,0,0,.05);
+
+      * { border-radius: 0; }
+
+      .ico-01 {
+        border-right: 1px solid #e0e0e0;
+        color: #000;
+
+        &::placeholder {
+          color: #A6A8AF;
+        }
+      }
+
+    }
+  }
+
+</style>
diff --git a/src/components/shared/AppHeader.vue b/src/components/shared/AppHeader.vue
index c3fc475..d36ad0a 100644
--- a/src/components/shared/AppHeader.vue
+++ b/src/components/shared/AppHeader.vue
@@ -1,5 +1,5 @@
 <script>
-import AppBanner from './AppBanner';
+import AppBanner from './AppBanner_v2';
 import AppTopbar from './AppTopbar';
 
 export default {
@@ -51,7 +51,7 @@ export default {
         </div>
       </div>
     </header>
-    <div class="clearfix" />
+    <!--<div class="clearfix" />-->
     <app-banner v-if="withBanner" />
   </section>
 </template>
diff --git a/src/components/shared/InfoBanner.vue b/src/components/shared/InfoBanner.vue
index cd8fc0e..d5f7789 100644
--- a/src/components/shared/InfoBanner.vue
+++ b/src/components/shared/InfoBanner.vue
@@ -3,7 +3,7 @@
     <div class="sixteen columns">
       <div class="info-banner">
         <div class="info-content">
-          <h3>İlanınız burada listelensin!</h3>
+          <h1>İlanınız burada listelensin!</h1>
           <p>Sizde iş ilanlarınızı birkaç dakika içerisinde ücretsiz olarak yayınlayabilirsiniz.</p>
         </div>
         <router-link to="/ilan-ekle" class="button tag-create-post">
diff --git a/src/components/shared/JobItem_v2.vue b/src/components/shared/JobItem_v2.vue
new file mode 100644
index 0000000..57c6101
--- /dev/null
+++ b/src/components/shared/JobItem_v2.vue
@@ -0,0 +1,164 @@
+<script>
+import JobTypeBadge from './JobTypeBadge';
+import jobDetail from '../../mixins/jobDetail';
+import image from '../../mixins/image';
+
+export default {
+  mixins: [jobDetail, image],
+  components: {
+    JobTypeBadge,
+  },
+};
+</script>
+
+<template>
+  <router-link
+    :to="detailsUrl"
+    :class="postTypeClassName"
+    class="listing tag-post-link"
+  >
+    <div class="listing-logo tag-post-link">
+      <img
+        :src="company.logo"
+        :alt="company.name"
+        ref="logo"
+        loading="lazy"
+        @error="handleImageError"
+        class="tag-post-link"
+      >
+    </div>
+    <div class="listing-title tag-post-link">
+      <div class="new">
+        <span class="title tag-post-link">
+          {{ post.position }}
+        </span>
+        <job-type-badge :post="post" />
+        <span class="timeago wide">
+          {{ timeago }}
+        </span>
+      </div>
+      <ul class="listing-icons">
+        <li class="company">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+          </svg>
+          <router-link :to="`/firmalar/${company.slug}`">
+            {{ company.name }}
+          </router-link>
+        </li>
+        <li>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+          <router-link :to="`/ilan-ara?location=${post.location}`">
+            {{ post.location }}
+          </router-link>
+        </li>
+        <li>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+          </svg>
+          <span>{{ timeago }}</span>
+        </li>
+      </ul>
+      <ul class="listing-icons">
+        <li>
+          <div
+            v-for="tag in post.tags"
+            :key="tag.slug"
+            class="listing-date post-tag tag-post-tag"
+          >
+            <router-link :to="`/etiket/${tag.slug}`" class="tag-post-tag">
+              {{ tag.name }}
+            </router-link>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </router-link>
+</template>
+
+<style lang="scss">
+.listing {
+  img {
+    width: 84px;
+    height: 84px;
+  }
+
+  .post-tag {
+    margin-right: 5px;
+  }
+
+  .listing-type {
+    top: 30px;
+  }
+
+  .timeago-item {
+    display: block;
+
+    span {
+      color: #26ae61;
+    }
+  }
+
+  .timeago.wide {
+    font-size: 12px;
+    color: #808080;
+    position: absolute;
+    right: 25px;
+    top: 60px;
+  }
+
+  div.new {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 8px;
+
+    span.title {
+      color: #000000;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 27px;
+
+      margin-right: 12px;
+      flex-grow: 1;
+    }
+
+    .listing-type {
+      position: unset;
+      font-size: 12px;
+      font-weight: 600;
+      padding: 1px 4px 0px 4px;
+      margin-right: 0px;
+    }
+
+    span.timeago.wide {
+      display: none;
+      position: unset;
+      font-size: 12px;
+      font-weight: 600;
+    }
+  }
+
+  .listing-icons li svg {
+    stroke: #1D4354;
+  }
+
+  .listing-icons li span, .listing-icons li a {
+    color: #1D4354;
+  }
+
+  /*&:hover {
+    .listing-icons li.company svg {
+      stroke: #26ae61;
+    }
+
+    .listing-icons li.company a {
+        color: #26ae61;
+        font-weight: 400;
+    }
+  }*/
+}
+</style>
diff --git a/src/components/shared/JobListing.vue b/src/components/shared/JobListing.vue
index 5dcfaa2..d0418a4 100644
--- a/src/components/shared/JobListing.vue
+++ b/src/components/shared/JobListing.vue
@@ -1,6 +1,6 @@
 <script>
 import Loader from './Loader';
-import JobItem from './JobItem';
+import JobItem from './JobItem_v2';
 
 export default {
   props: {
diff --git a/src/components/shared/JobListingWithFilters.vue b/src/components/shared/JobListingWithFilters.vue
index 9b79bea..0907c70 100644
--- a/src/components/shared/JobListingWithFilters.vue
+++ b/src/components/shared/JobListingWithFilters.vue
@@ -93,30 +93,70 @@ export default {
         </div>
       </div>
       <div v-if="!isLoading" class="five columns">
-        <div class="widget">
-          <input
-            v-model="params.query"
-            @keypress.enter="search"
-            type="text"
-            class="ico-01"
-            placeholder="Pozisyon adı, teknoloji adı"
-          >
-          <location-select v-model="params.location" :value="params.location" :searchable="true" />
-          <multiselect
-            v-model="type"
-            :options="typeOptions"
-            label="text"
-            :searchable="false"
-            :close-on-select="true"
-            placeholder="Çalışma tipi seçiniz..."
-          />
-        </div>
-        <div class="button-right">
-          <button @click="search" class="button tag-search-btn">
-            Ara
-          </button>
+        <h3>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+          Farklı ilanlar arayın
+        </h3>
+        <div class="searchform-wrapper">
+          <div class="widget">
+            <input
+              v-model="params.query"
+              @keypress.enter="search"
+              type="text"
+              class="ico-01"
+              placeholder="Pozisyon adı, teknoloji adı"
+            >
+            <location-select v-model="params.location" :value="params.location" :searchable="true" />
+            <multiselect
+              v-model="type"
+              :options="typeOptions"
+              label="text"
+              :searchable="false"
+              :close-on-select="true"
+              placeholder="Çalışma tipi seçiniz..."
+            />
+          </div>
+          <div class="button-right">
+            <button @click="search" class="button tag-search-btn">
+              Ara
+            </button>
+          </div>
         </div>
       </div>
     </div>
   </section>
 </template>
+
+<style lang="scss" scoped>
+  .five.columns {
+    .searchform-wrapper {
+      margin-top: 24px;
+      border-radius: 4px;
+      box-sizing: border-box;
+      background-color: #FFF;
+      padding: 12px 24px 24px 24px;
+      box-shadow: 0px 2px 4px -3px rgba(0,0,0,.1), 0px 10px 15px -3px rgba(0,0,0,.05);
+    }
+  }
+
+  h3 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    font-weight: 500;
+
+    svg {
+      width: 24px;
+      height: 24px;
+      background-color: #26ae61;
+      stroke: #FFF;
+      margin-right: 12px;
+      padding: 8px;
+      border-radius: 50%;
+    }
+  }
+
+</style>
diff --git a/src/components/shared/JobSpotlight.vue b/src/components/shared/JobSpotlight.vue
index 371c818..20d6062 100644
--- a/src/components/shared/JobSpotlight.vue
+++ b/src/components/shared/JobSpotlight.vue
@@ -45,7 +45,10 @@ export default {
 
 <template>
   <div class="columns">
-    <h3 class="margin-bottom-5">
+    <h3>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+      </svg>
       Öne çıkan ilanlar
     </h3>
     <loader v-if="isLoading" />
@@ -95,6 +98,27 @@ export default {
 </template>
 
 <style lang="scss">
+
+  h3 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    font-weight: 500;
+    margin-bottom: 8px;
+
+    svg {
+      width: 24px;
+      height: 24px;
+      background-color: #26ae61;
+      stroke: #FFF;
+      margin-right: 12px;
+      padding: 8px;
+      border-radius: 50%;
+    }
+  }
+
+
 #job-spotlight {
   .wrapper {
     overflow: hidden;
diff --git a/src/components/shared/LocationSelect.vue b/src/components/shared/LocationSelect.vue
index 275ce63..b56adbf 100644
--- a/src/components/shared/LocationSelect.vue
+++ b/src/components/shared/LocationSelect.vue
@@ -90,3 +90,20 @@ export default {
     </div>
   </multiselect>
 </template>
+
+<style lang="scss" scoped>
+
+  input.multiselect__input:focus {
+    border: none;
+    opacity: 1;
+    box-shadow: none !important;
+  }
+
+  .multiselect__tags {
+    color: #000;
+
+    &::placeholder {
+      color: #A6A8AF;
+    }
+  }
+</style>
diff --git a/src/components/shared/RecentJobsList.vue b/src/components/shared/RecentJobsList.vue
index fa26395..dea7e65 100644
--- a/src/components/shared/RecentJobsList.vue
+++ b/src/components/shared/RecentJobsList.vue
@@ -49,10 +49,15 @@ export default {
 <template>
   <div class="eleven columns">
     <div class="padding-right">
-      <h3 class="margin-bottom-25">
+      <h3>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z" />
+        </svg>
         En son eklenen ilanlar
       </h3>
+      <div class="margin-bottom-30" />
       <job-period-selector />
+      <div class="margin-bottom-25" />
       <job-listing
         :is-loading="isLoading"
         :posts="recentPosts"
@@ -62,10 +67,34 @@ export default {
         class="button centered tag-all-posts"
         v-if="!isLoading && recentPosts.length"
       >
-        <i class="fa fa-plus-circle" />
+        <!--<i class="fa fa-plus-circle" />-->
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
         Tüm ilanları gör
       </router-link>
       <div class="margin-bottom-55" />
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+  h3 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    font-weight: 500;
+
+    svg {
+      width: 24px;
+      height: 24px;
+      background-color: #26ae61;
+      stroke: #FFF;
+      margin-right: 12px;
+      padding: 8px;
+      border-radius: 50%;
+    }
+  }
+
+</style>
diff --git a/src/components/shared/Testimonials.vue b/src/components/shared/Testimonials.vue
index e667a04..5c3e3b7 100644
--- a/src/components/shared/Testimonials.vue
+++ b/src/components/shared/Testimonials.vue
@@ -13,6 +13,9 @@ export default {
     <div class="container">
       <div class="sixteen columns">
         <h3 class="headline centered">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
+          </svg>
           kodilan.com kullanıcılarının yorumları
         </h3>
       </div>