diff --git a/_layouts/home.html b/_layouts/home.html
index d34448c..fc45080 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ page.title | default: site.title }}</title>
     <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" integrity="sha512-GFWbG5g0DfdO1E7U9Eb1mXQK8J8tzm4O9EPIes2RvnAlKl7IKtIhZbmtj+0ve3qDbXxFlmfUOq7G1g4C1S3pRw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 <body class="home">
     {% include header.html %}
@@ -22,7 +21,7 @@ <h1>ChinaComX</h1>
             <div class="container">
                 <h2>Latest Posts</h2>
                 <div class="post-carousel">
-                    <button class="carousel-btn left-btn">&#8592;</button>
+                    <button class="carousel-btn left-btn" onclick="scrollLeft()">&#8592;</button>
                     <div class="post-wrapper">
                         {% for post in site.posts %}
                             <div class="post">
@@ -31,13 +30,26 @@ <h3><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h3>
                             </div>
                         {% endfor %}
                     </div>
-                    <button class="carousel-btn right-btn">&#8594;</button>
+                    <button class="carousel-btn right-btn" onclick="scrollRight()">&#8594;</button>
                 </div>
             </div>
         </section>
     </main>
     {% include footer.html %}
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js" integrity="sha512-omEV6rQfvd7REw5g4Irb2s0yWnhp9ElN5PbzZ7/0SP8VeoTqPecWB57Tew+wQ4TlTflw4ENOuOdGEr7N5/Usow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="{{ '/assets/js/main.js' | relative_url }}"></script>
+    <script>
+        function scrollLeft() {
+            document.querySelector('.post-wrapper').scrollBy({
+                left: -300,
+                behavior: 'smooth'
+            });
+        }
+        function scrollRight() {
+            document.querySelector('.post-wrapper').scrollBy({
+                left: 300,
+                behavior: 'smooth'
+            });
+        }
+    </script>
 </body>
 </html>
diff --git a/assets/css/style.css b/assets/css/style.css
index fe3b7b5..5b56ec3 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -92,6 +92,77 @@ header .navbar-nav .nav-link:focus, header .navbar-nav .nav-link.active {
     line-height: 1.6;
 }
 
+/* Home Page Styles */
+.splash {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-color: #6bbf59;
+    color: white;
+    text-align: center;
+}
+
+.splash .splash-content {
+    max-width: 600px;
+}
+
+.scroll-down {
+    display: block;
+    margin: 20px auto;
+    font-size: 24px;
+    color: white;
+    text-decoration: none;
+    animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-10px);
+    }
+    60% {
+        transform: translateY(-5px);
+    }
+}
+
+.post-carousel {
+    display: flex;
+    align-items: center;
+}
+
+.post-wrapper {
+    display: flex;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+}
+
+.post {
+    min-width: 300px;
+    margin-right: 10px;
+    background: #fff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 1em;
+    border-radius: 5px;
+}
+
+.carousel-btn {
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.left-btn {
+    margin-right: 10px;
+}
+
+.right-btn {
+    margin-left: 10px;
+}
+
 .splash {
     background: url('/assets/images/hero.jpg') no-repeat center center/cover;
     color: #fff;
diff --git a/assets/js/main.js b/assets/js/main.js
index 01393ef..248c63a 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,6 +1,4 @@
 document.addEventListener("DOMContentLoaded", function() {
-    AOS.init();
-
     const header = document.getElementById("header");
     if (document.body.classList.contains('home')) {
         window.addEventListener("scroll", function() {
