diff --git a/layouts/partials/experiences.html b/layouts/partials/experiences.html
index 1b21f29..f2e265d 100644
--- a/layouts/partials/experiences.html
+++ b/layouts/partials/experiences.html
@@ -1,25 +1,15 @@
 <div class="container-fluid anchor pb-5 experiences-section" id="{{ replace (lower .section.name) " " "-" }}">
   {{ if not (.section.hideTitle) }}
-    <h2 class="text-center">{{ .section.name }}</h1>
-  {{ end }}
+  <h2 class="text-center">{{ .section.name }}</h1>
+    {{ end }}
 
-  <div class="container timeline text-justify">
-   {{ $totalExperiences:= len .experiences }}
-   {{ range $index,$experience:= .experiences }}
-     {{ if eq (mod $index 2) 0 }}
-       <div class="row align-items-center  d-flex">
-         {{ partial "experiences/vertical-line.html" $index }}
-         {{ partial "experiences/experience-info.html" $experience }}
-       </div>
-     {{else}}
-       <div class="row align-items-center justify-content-end d-flex">
-         {{ partial "experiences/experience-info.html" $experience }}
-         {{ partial "experiences/vertical-line.html" $index }}
-       </div>
-     {{ end }}
-     {{ if lt $index (sub $totalExperiences 1) }}
-       {{ partial "experiences/horizontal-line.html" $index }}
-     {{ end }}
-   {{ end }}
-  </div>
-</div>
+    <div class="container timeline text-justify">
+      {{ range $experience:= .experiences }}
+        <div class="row d-flex experience">
+          <div class="col-12">
+            {{ partial "experiences/experience-info.html" $experience }}
+          </div>
+        </div>
+      {{ end }}
+    </div>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/experiences/horizontal-line.html b/layouts/partials/experiences/horizontal-line.html
deleted file mode 100644
index 95f13ae..0000000
--- a/layouts/partials/experiences/horizontal-line.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="row horizontal-line">
-  <div class="col-1 col-lg-2 timeline-side-div">
-    <div class="corner"></div>
-  </div>
-  <div class="col-10 col-lg-8">
-    <hr />
-  </div>
-  <div class="col-1 col-lg-2 timeline-side-div">
-    <div class="corner"></div>
-  </div>
-</div>
diff --git a/layouts/partials/experiences/multiple-positions.html b/layouts/partials/experiences/multiple-positions.html
index e57143f..cb6f200 100644
--- a/layouts/partials/experiences/multiple-positions.html
+++ b/layouts/partials/experiences/multiple-positions.html
@@ -1,30 +1,29 @@
-<div class="col-10 col-lg-8">
-    <div class="experience-entry-heading">
-        <!-- For multiple positions, give emphasis on the company name-->
+<div class="company">
+    <div class="company-logo">
+        <img src="{{ .company.logo_path }} ">
+    </div>
+    <div class="company-info">
         <h5>{{ if .company.url }}<a href={{.company.url}}>{{ .company.name }}</a>{{ else }}{{ .company.name }}{{ end }}</h5>
-
-        <!-- Total experience duration on a company is time between the starting date of the oldest position and ending date of most recent position -->
         {{ $oldestPosition := index (last 1 .positions) 0}}
         {{ $mostRecentPosition := index (first 1 .positions) 0}}
-        <p class="text-muted">
-            {{ $oldestPosition.start }} - {{ if $mostRecentPosition.end }}{{ $mostRecentPosition.end }}{{ else }}Present{{ end }},
+        <span class="text-muted">
+            {{ $oldestPosition.start }} - {{ $mostRecentPosition.end }},
             {{ .company.location }}
-        </p>
-        <!-- Add company overview -->
+        </span>
         <p>{{ .company.overview | markdownify }}</p>
     </div>
-    <!-- Add the positions information -->
-    <div class="positions">
-    {{ range $index,$position:= .positions }}
+</div>
+
+<div class="company-timeline">
+{{ range $index,$position:= .positions }}
+    <div class="company-timeline-item position">
         <h6 class="designation">{{ $position.designation }}</h6>
         <p class="text-muted">{{ $position.start }} - {{if $position.end }} {{ $position.end }} {{else}} Present {{end}}</p>
-        <!-- Add the responsibilities handled at this position -->
-        <ul class="justify-content-around">
+        <ul class="justify-content-around responsabilities">
         {{ range $position.responsibilities }}
             <li>{{ . | markdownify }}</li>
         {{ end }}
         </ul>
-        <br>
-    {{ end }}
     </div>
+{{ end }}
 </div>
diff --git a/layouts/partials/experiences/single-position.html b/layouts/partials/experiences/single-position.html
index 69fbe96..9f52cc1 100644
--- a/layouts/partials/experiences/single-position.html
+++ b/layouts/partials/experiences/single-position.html
@@ -1,16 +1,24 @@
-<div class="col-10 col-lg-8">
-    <div class="experience-entry-heading">
+<div class="company">
+    <div class="company-logo">
+        <img src="{{ .company.logo_path }} ">
+    </div>
+    <div class="company-info">
         <h5>{{ .designation }}</h5>
         <h6>{{ if .company.url }}<a href={{.company.url}}>{{ .company.name }}</a>{{ else }}{{ .company.name }}{{ end }}</h6>
-        <p class="text-muted">{{ .start }} - {{ if .end }}{{ .end }}{{ else }}Present{{ end }},
+        <span class="text-muted">{{ .start }} - {{ .end }},
             {{ .company.location }}
-        </p>
+        </span>
     </div>
-    <p>{{ .company.overview | markdownify }}</p>
-    <h6 class="text-muted">Responsibilities:</h6>
-    <ul class="justify-content-around">
-    {{ range .responsibilities }}
-        <li>{{ . | markdownify }}</li>
-    {{ end }}
-    </ul>
 </div>
+
+
+<div class="company-timeline">
+    <div class="company-timeline-item">
+        <p>{{ .company.overview | markdownify }}</p>
+        <ul class="justify-content-around">
+        {{ range .responsibilities }}
+            <li>{{ . | markdownify }}</li>
+        {{ end }}
+        </ul>
+    </div>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/experiences/vertical-line.html b/layouts/partials/experiences/vertical-line.html
deleted file mode 100644
index 7d8b74b..0000000
--- a/layouts/partials/experiences/vertical-line.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="col-1 col-lg-2 text-center vertical-line d-inline-flex justify-content-center">
-  <div class="circle font-weight-bold">{{ add . 1 }}</div>
-</div>
diff --git a/static/assets/css/experiences.css b/static/assets/css/experiences.css
index 331870c..ecf83a7 100644
--- a/static/assets/css/experiences.css
+++ b/static/assets/css/experiences.css
@@ -19,93 +19,91 @@
   margin-bottom: 0.2rem;
 }
 
-.positions > h6 {
+.experiences-section .designation{
+ font-weight: 600;
+ text-align: left;
+}
+
+.company{
+  display: flex;
+  align-items: center;
+}
+
+
+.company-logo {
+  height: 56px;
+  width: 56px;
+}
+
+.company-logo img {
+  border-radius: 15%;
+  width: 100%;
+  height: 100%;
+}
+
+.company-info {
+  margin-left: 24px;
+  width: 75%;
+}
+
+.company-timeline {
+  display: flex;
+  flex-direction: column;
+  list-style-type: none;
+  padding: 0;
+  margin: 10px 0 0 0;
+}
+
+.company-timeline > h6 {
   margin-bottom: 0.2rem;
 }
 
-.positions > .text-muted {
+.company-timeline  > .text-muted {
   font-size: 0.9rem;
   margin-bottom: 0.5rem;
 }
 
-.experiences-section .designation{
- font-weight: 600;
+.experience:not(:last-child) {
+  margin-bottom: 1rem;
+  border-bottom: 2px solid #e6e9ec;
 }
 
-.circle {
-  padding: 13px 20px;
-  border-radius: 50%;
-  background-color: #248aaa;
-  color: #f9fafc;
-  max-height: 50px;
-  margin-left: 2px;
-  z-index: 2;
+.responsabilities {
+  margin-bottom: 1rem;
 }
 
-.vertical-line-left-adjustment > .circle {
-  margin-right: 6px;
+.company-timeline-item {
+    position: relative;
+    padding-bottom: 20px;
+    margin-bottom: 8px;
+    padding-left: 80px;
 }
 
-.timeline .vertical-line {
-  align-self: stretch;
-}
-
-.timeline .vertical-line::after {
+.company-timeline-item.position::before {
   content: "";
   position: absolute;
-  border-left: 3px solid #248aaa;
-  z-index: 1;
-  height: 100%;
-  left: 50%;
+  top: 8px;
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+  background-color: #7cb2c3;
+  left: 24px;
 }
 
-.vertical-line-left-adjustment::after {
-  left: calc(50% - 3px) !important;
+.company-timeline-item.position::after {
+  content: "";
+  position: absolute;
+  top: 24px;
+  height: calc(100% - 18px);
+  width: 2px;
+  background-color: #7cb2c3;
+  left: 27px;
 }
 
-.timeline .horizontal-line div {
-  padding: 0;
-  height: 40px;
+.company-timeline-item:last-child::after {
+  content: none;
 }
 
-.timeline .horizontal-line hr {
-  border-top: 3px solid #248aaa;
-  margin: 0;
-  top: 17px;
-  position: relative;
-}
-
-.timeline .horizontal-line .timeline-side-div {
-  display: flex;
-  overflow: hidden;
-}
-
-.timeline .horizontal-line .corner {
-  border: 3px solid #248aaa;
-  width: 100%;
-  position: relative;
-  border-radius: 15px;
-}
-
-.top-left {
-  left: -50%;
-  top: -50%;
-}
-
-.top-right {
-  left: 50%;
-  top: -50%;
-}
-
-.bottom-left {
-  left: -50%;
-  top: calc(50% - 3px);
-}
-
-.bottom-right {
-  left: 50%;
-  top: calc(50% - 3px);
-}
 
 /* ============= Device specific fixes ======= */
 
@@ -134,71 +132,45 @@
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
-  .positions {
-    font-size: 0.95em;
-    margin-bottom: 0.5rem;
+  .container.timeline {
+    padding-left: 0px;
+    padding-right: 10px;
   }
 
-  .circle {
-    padding: 8px 15px;
-    max-height: 40px;
+  .company-timeline-item {
+    padding-left: 55px;
+  }
+
+  .company-logo {
+    height: 42px;
+    width: 42px;
+  }
+
+  .company-info {
+    margin-left: 16px;
+  }
+
+  .company-timeline-item.position::before {
+    left: 17px;
+  }
+
+
+  .company-timeline-item.position::after {
+    left: 20px;
   }
 }
 
 /* iPhoneX, iPhone 6,7,8 */
 @media only screen and (max-width: 375px) {
-  .top-left {
-    left: -52%;
-  }
-  
-  .top-right {
-    left: 52%;
-  }
-
-  .bottom-right {
-    left: 52%;
-  }
-
-  .bottom-left {
-    left: -52%;
-  }
 
 }
 
 /* Galaxy S5, Moto G4 */
 @media only screen and (max-width: 360px) {
-  .top-left {
-    left: -56%;
-  }
-  
-  .top-right {
-    left: 56%;
-  }
 
-  .bottom-right {
-    left: 56%;
-  }
-
-  .bottom-left {
-    left: -56%;
-  }
 }
 
 /* iPhone 5 or before */
 @media only screen and (max-width: 320px) {
-  .top-left {
-    left: -64%;
-  }
-  
-  .top-right {
-    left: 64%;
-  }
 
-  .bottom-right {
-    left: 64%;
-  }
-
-  .bottom-left {
-    left: -64%;
-  }
-}
+}
\ No newline at end of file