diff --git a/assets/css/custom.css b/assets/css/custom.css
new file mode 100644
index 0000000..7af3efc
--- /dev/null
+++ b/assets/css/custom.css
@@ -0,0 +1,76 @@
+/* General Styling */
+body {
+    font-family: 'Lato', sans-serif;
+    background-color: #F8F9FA;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Poppins', sans-serif;
+}
+
+/* Navbar */
+.navbar {
+    background-color: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(10px);
+    transition: background-color 0.3s ease;
+}
+
+.navbar-brand {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+}
+
+/* Hero Section */
+.hero-section {
+    background: linear-gradient(45deg, #0D6EFD, #0747A6);
+    background-size: 200% 200%;
+    animation: gradient-animation 10s ease infinite;
+}
+
+.google-play-badge img {
+    height: 60px;
+    transition: transform 0.3s ease;
+}
+
+.google-play-badge:hover img {
+    transform: scale(1.05);
+}
+
+@keyframes gradient-animation {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* Features Section */
+#features .card {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border-radius: 1rem;
+}
+
+#features .card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
+}
+
+
+/* Gallery */
+#gallery img {
+    transition: transform 0.3s ease;
+}
+
+#gallery img:hover {
+    transform: scale(1.05);
+}
+
+/* Animations */
+.fade-in {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+
+.fade-in.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+}
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..591297d
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,31 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Smooth scrolling for nav links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
+
+    // Fade-in elements on scroll
+    const fadeInElements = document.querySelectorAll('.fade-in');
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('is-visible');
+            } else {
+                // Optional: remove class when element scrolls out of view
+                // entry.target.classList.remove('is-visible'); 
+            }
+        });
+    }, {
+        threshold: 0.1 // Trigger when 10% of the element is visible
+    });
+
+    fadeInElements.forEach(element => {
+        observer.observe(element);
+    });
+});