diff --git a/app/views/foodcourt/second_display/_slider.html.erb b/app/views/foodcourt/second_display/_slider.html.erb
index 71f463b7..bdd905e8 100644
--- a/app/views/foodcourt/second_display/_slider.html.erb
+++ b/app/views/foodcourt/second_display/_slider.html.erb
@@ -1,20 +1,106 @@
-<%= stylesheet_link_tag    'wow_style', media: 'all', 'data-turbolinks-track': 'reload' %>
-<%= javascript_include_tag 'wowslider', 'data-turbolinks-track': 'reload' %> 
-<%= javascript_include_tag 'wow_script', 'data-turbolinks-track': 'reload' %>
-<div class="row">
- 	<div class="col-lg-12 col-md-12 col-sm-12">
- 		<div id="wowslider-container" style="max-width: 100%;">
-			<div class="ws_images full_screen">
-				<ul>
-					<% @display_images.each do |p| %>
-						<li>
-		                	<%= image_tag "#{p.image}", :alt => "rss feed"%>
-		                </li>	
-		            <% end %>
-				</ul>
-			</div>
-			<div class="ws_bullets"></div>
-		</div>
-	</div> 
-</div>	
 
+<style>
+* {box-sizing: border-box;}
+body {font-family: Verdana, sans-serif; 
+  overflow: hidden;}
+.mySlides {
+  position: absolute;
+}
+img {vertical-align: middle;}
+
+/* Slideshow container */
+.slideshow-container {
+  max-width: 1000px;
+  position: relative;
+  margin: auto;
+}
+
+/* Caption text */
+.text {
+  color: #f2f2f2;
+  font-size: 15px;
+  padding: 8px 12px;
+  position: absolute;
+  bottom: 8px;
+  width: 100%;
+  text-align: center;
+}
+
+/* Number text (1/3 etc) */
+.numbertext {
+  color: #f2f2f2;
+  font-size: 12px;
+  padding: 8px 12px;
+  position: absolute;
+  top: 0;
+}
+
+/* Fading animation */
+.slide-in {
+  animation-name: slide-in;
+  animation-duration: 2s; /* Adjust the duration as per your preference */
+  animation-fill-mode: forwards;
+}
+
+.slide-out {
+  animation-name: slide-out;
+  animation-duration: 2s; /* Adjust the duration as per your preference */
+  animation-fill-mode: forwards;
+}
+
+@keyframes slide-in {
+  0% { transform: translateX(100%); }
+  100% { transform: translateX(0%); }
+}
+
+@keyframes slide-out {
+  0% { transform: translateX(0%); }
+  50% { opacity: 1; }
+  100% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+
+/* On smaller screens, decrease text size */
+@media only screen and (max-width: 300px) {
+  .text {font-size: 11px}
+}
+</style>
+</head>
+<body>
+
+<div class="slideshow-container">
+  <% @display_images.each do |p| %>
+    <div class="mySlides slide-out">
+      <%= image_tag "#{p.image}", :class=> "w-100"%>
+    </div>
+  <% end %>
+</div>
+<script>
+let slideIndex = 0;
+showSlides();
+
+function showSlides() {
+  let slides = document.getElementsByClassName("mySlides");
+  let dots = document.getElementsByClassName("dot");
+
+  
+  for (let i = 0; i < slides.length; i++) {
+  slides[i].className = slides[i].className.replace("slide-in", "slide-out");
+  }
+
+  slideIndex++;
+  if (slideIndex > slides.length) {
+    slideIndex = 1;
+  }
+
+  for (let i = 0; i < dots.length; i++) {
+    dots[i].className = dots[i].className.replace(" active", "");
+  }
+
+  slides[slideIndex - 1].className = slides[slideIndex - 1].className.replace("slide-out", "slide-in");
+
+  setTimeout(showSlides, 4000); // Change image every 5 seconds
+}
+</script>
diff --git a/app/views/origami/second_display/_slider.html.erb b/app/views/origami/second_display/_slider.html.erb
index 71f463b7..bdd905e8 100644
--- a/app/views/origami/second_display/_slider.html.erb
+++ b/app/views/origami/second_display/_slider.html.erb
@@ -1,20 +1,106 @@
-<%= stylesheet_link_tag    'wow_style', media: 'all', 'data-turbolinks-track': 'reload' %>
-<%= javascript_include_tag 'wowslider', 'data-turbolinks-track': 'reload' %> 
-<%= javascript_include_tag 'wow_script', 'data-turbolinks-track': 'reload' %>
-<div class="row">
- 	<div class="col-lg-12 col-md-12 col-sm-12">
- 		<div id="wowslider-container" style="max-width: 100%;">
-			<div class="ws_images full_screen">
-				<ul>
-					<% @display_images.each do |p| %>
-						<li>
-		                	<%= image_tag "#{p.image}", :alt => "rss feed"%>
-		                </li>	
-		            <% end %>
-				</ul>
-			</div>
-			<div class="ws_bullets"></div>
-		</div>
-	</div> 
-</div>	
 
+<style>
+* {box-sizing: border-box;}
+body {font-family: Verdana, sans-serif; 
+  overflow: hidden;}
+.mySlides {
+  position: absolute;
+}
+img {vertical-align: middle;}
+
+/* Slideshow container */
+.slideshow-container {
+  max-width: 1000px;
+  position: relative;
+  margin: auto;
+}
+
+/* Caption text */
+.text {
+  color: #f2f2f2;
+  font-size: 15px;
+  padding: 8px 12px;
+  position: absolute;
+  bottom: 8px;
+  width: 100%;
+  text-align: center;
+}
+
+/* Number text (1/3 etc) */
+.numbertext {
+  color: #f2f2f2;
+  font-size: 12px;
+  padding: 8px 12px;
+  position: absolute;
+  top: 0;
+}
+
+/* Fading animation */
+.slide-in {
+  animation-name: slide-in;
+  animation-duration: 2s; /* Adjust the duration as per your preference */
+  animation-fill-mode: forwards;
+}
+
+.slide-out {
+  animation-name: slide-out;
+  animation-duration: 2s; /* Adjust the duration as per your preference */
+  animation-fill-mode: forwards;
+}
+
+@keyframes slide-in {
+  0% { transform: translateX(100%); }
+  100% { transform: translateX(0%); }
+}
+
+@keyframes slide-out {
+  0% { transform: translateX(0%); }
+  50% { opacity: 1; }
+  100% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+
+/* On smaller screens, decrease text size */
+@media only screen and (max-width: 300px) {
+  .text {font-size: 11px}
+}
+</style>
+</head>
+<body>
+
+<div class="slideshow-container">
+  <% @display_images.each do |p| %>
+    <div class="mySlides slide-out">
+      <%= image_tag "#{p.image}", :class=> "w-100"%>
+    </div>
+  <% end %>
+</div>
+<script>
+let slideIndex = 0;
+showSlides();
+
+function showSlides() {
+  let slides = document.getElementsByClassName("mySlides");
+  let dots = document.getElementsByClassName("dot");
+
+  
+  for (let i = 0; i < slides.length; i++) {
+  slides[i].className = slides[i].className.replace("slide-in", "slide-out");
+  }
+
+  slideIndex++;
+  if (slideIndex > slides.length) {
+    slideIndex = 1;
+  }
+
+  for (let i = 0; i < dots.length; i++) {
+    dots[i].className = dots[i].className.replace(" active", "");
+  }
+
+  slides[slideIndex - 1].className = slides[slideIndex - 1].className.replace("slide-out", "slide-in");
+
+  setTimeout(showSlides, 4000); // Change image every 5 seconds
+}
+</script>
