diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 1939c46..4438f96 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -5,6 +5,7 @@ import Register from './Pages/Register';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import chatbotsvg from './assets/svg/chatbot.svg';
 import { useNavigate, Outlet } from 'react-router-dom';
+import RailwayStations from './Pages/stations';
 import './App.css'
 
 function App() {
@@ -16,6 +17,7 @@ function App() {
         <Route path="/" element={<Herosection />} />
         <Route path="/Login" element={<LoginPage />} />
         <Route path="/Register" element={<Register />} />
+        <Route path='/Stations' element={<RailwayStations/>} />
 
         {/* This route is just for testing protected routes it can be removed later when there is a route other than login or signup */}
         <Route element={<ProtectedRoute />}>
diff --git a/frontend/src/Pages/Herosection.jsx b/frontend/src/Pages/Herosection.jsx
index 2cea13c..6d510e5 100644
--- a/frontend/src/Pages/Herosection.jsx
+++ b/frontend/src/Pages/Herosection.jsx
@@ -23,6 +23,9 @@ const Herosection = () => {
     const RegisterClick = () => {
         navigate('/Register'); // Navigates to the login page
     };
+    const StationCLick = () => {
+        navigate('/Stations'); // Navigates to the login page
+    };
     return (
         <>
         
@@ -48,7 +51,8 @@ const Herosection = () => {
         <div className='grid grid-cols-3 gap-4 mt-32 md:flex md:flex-row md:justify-evenly justify-items-center'>
                  <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={navigationsvg} alt="" srcset="" className='bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2' /> <h1 className='font-bold text-black'>Navigation</h1></div>
                  <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={bookingsvg} alt="" srcset="" className= "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /> <h1 className='font-bold text-black'>Booking</h1></div>
-                 <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={stationsvg} alt="" srcset="" className = "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" />  <h1 className='font-bold text-black'>Station</h1></div>
+                 <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={stationsvg} alt="" srcset="" className = "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" />  <h1 className='font-bold text-black'></h1>
+                 <button type="submit" onClick={StationCLick} className="w-20 py-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" >Station</button></div>
                  <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={mapsvg} alt="" srcset="" className = "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /> <h1 className='font-bold text-black'>3D Map</h1></div>
                  <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={schedulesvg} alt="" srcset="" className = "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /> <h1 className='font-bold text-black'>Schedule</h1></div>
                  <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={noticationsvg} alt="" srcset="" className = "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /> <h1 className='font-bold text-black'>Notification</h1></div>
diff --git a/frontend/src/Pages/stations.jsx b/frontend/src/Pages/stations.jsx
index e69de29..f89e896 100644
--- a/frontend/src/Pages/stations.jsx
+++ b/frontend/src/Pages/stations.jsx
@@ -0,0 +1,168 @@
+// src/components/RailwayStations.jsx
+
+import React, { useState } from 'react';
+import { FaTrain } from 'react-icons/fa'; // Using FontAwesome train icon
+import { AiFillStar, AiOutlineStar } from 'react-icons/ai'; // Star icons for favorites
+
+const RailwayStations = () => {
+    // Comprehensive list of railway stations
+    const stations = [
+        'Mumbai Central',
+        'Chhatrapati Shivaji Maharaj Terminus',
+        'Delhi Junction',
+        'Kolkata Chitpur',
+        'Bangalore City',
+        'Hyderabad Deccan',
+        'Ahmedabad Junction',
+        'Chennai Central',
+        'Pune Junction',
+        'Lucknow Charbagh',
+        'Jaipur Junction',
+        'Kanpur Central',
+        'Nagpur Junction',
+        'Surat Junction',
+        'Patna Junction',
+        'Indore Junction',
+        'Vadodara Junction',
+        'Bhopal Junction',
+        'Guwahati Junction',
+        'Amritsar Junction',
+        'Secunderabad Junction',
+        'Vijayawada Junction',
+        'Cochin Ernakulam Junction',
+        'Howrah Junction',
+        'Dibrugarh Junction',
+        'Thiruvananthapuram Central',
+        'Visakhapatnam Junction',
+        'Udaipur City',
+        'Gwalior Junction',
+        'Agra Cantonment',
+        'Bareilly Junction',
+        'Jammu Tawi',
+        'Bhubaneswar',
+        'Dehradun',
+        'Mysore Junction',
+        'Hubli Junction',
+        'Kota Junction',
+        'Srinagar Junction',
+        'Varanasi Junction',
+        'Allahabad Junction',
+        'Mangalore Junction',
+        'Bareilly Junction',
+        'Amritsar Cantonment',
+        'Jabalpur Junction',
+        'Kalyan Junction',
+        'Gurgaon Junction',
+        'Bilaspur Junction',
+        'Ranchi Junction',
+        'Ujjain Junction',
+        'Coimbatore Junction',
+        'Tirupati',
+        'Guntur Junction',
+        'Kota Junction',
+        'Siliguri Junction',
+        'Nanded Junction',
+        'Bikaner Junction',
+        'Madurai Junction',
+        'Rourkela Junction',
+        'Jodhpur Junction',
+        // Add more stations as needed
+    ];
+
+    const [searchTerm, setSearchTerm] = useState('');
+    const [favorites, setFavorites] = useState([]);
+
+    // Function to toggle favorite stations
+    const toggleFavorite = (station) => {
+        if (favorites.includes(station)) {
+            setFavorites(favorites.filter((fav) => fav !== station));
+        } else {
+            setFavorites([...favorites, station]);
+        }
+    };
+
+    // Filter stations based on search term
+    const filteredStations = stations.filter((station) =>
+        station.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    return (
+        <div className="min-h-screen bg-gray-100 p-4">
+            {/* Header Section */}
+            <div className="flex flex-col items-center mb-8">
+                <h1 className="text-3xl font-bold text-gray-800">Railway Stations</h1>
+                <p className="text-gray-600 mt-2">Find and explore railway stations across India</p>
+            </div>
+
+            {/* Search Bar */}
+            <div className="flex justify-center mb-6">
+                <input
+                    type="text"
+                    placeholder="Search for a railway station..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    className="w-full max-w-md px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
+                />
+            </div>
+
+            {/* Stations Grid */}
+            <div className="flex justify-center">
+                <div className="w-full max-w-4xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+                    {filteredStations.length > 0 ? (
+                        filteredStations.map((station, index) => (
+                            <div
+                                key={index}
+                                className="flex items-center justify-between p-4 bg-white rounded-lg shadow hover:shadow-lg transition duration-200"
+                            >
+                                <div className="flex items-center">
+                                    <FaTrain className="text-blue-500 w-6 h-6 mr-3" />
+                                    <span className="text-gray-800 font-medium">{station}</span>
+                                </div>
+                                <button
+                                    onClick={() => toggleFavorite(station)}
+                                    className="text-yellow-500 focus:outline-none"
+                                    aria-label={favorites.includes(station) ? "Remove from favorites" : "Add to favorites"}
+                                >
+                                    {favorites.includes(station) ? <AiFillStar className="w-5 h-5" /> : <AiOutlineStar className="w-5 h-5" />}
+                                </button>
+                            </div>
+                        ))
+                    ) : (
+                        <div className="col-span-full p-4 text-center text-gray-500">No stations found.</div>
+                    )}
+                </div>
+            </div>
+
+            {/* Favorites Section (Optional) */}
+            {favorites.length > 0 && (
+                <div className="mt-8">
+                    <h2 className="text-2xl font-semibold text-gray-800 mb-4">Your Favorite Stations</h2>
+                    <div className="flex justify-center">
+                        <div className="w-full max-w-4xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+                            {favorites.map((station, index) => (
+                                <div
+                                    key={index}
+                                    className="flex items-center justify-between p-4 bg-yellow-100 rounded-lg shadow hover:shadow-lg transition duration-200"
+                                >
+                                    <div className="flex items-center">
+                                        <FaTrain className="text-yellow-500 w-6 h-6 mr-3" />
+                                        <span className="text-gray-800 font-medium">{station}</span>
+                                    </div>
+                                    <button
+                                        onClick={() => toggleFavorite(station)}
+                                        className="text-red-500 focus:outline-none"
+                                        aria-label="Remove from favorites"
+                                    >
+                                        <AiFillStar className="w-5 h-5" />
+                                    </button>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default RailwayStations;
diff --git a/package-lock.json b/package-lock.json
index 312904c..115997a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
+        "react-icons": "^5.3.0",
         "vite": "^5.4.8"
       }
     },
@@ -600,6 +601,24 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "peer": true
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -649,6 +668,26 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.24.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.0.tgz",
diff --git a/package.json b/package.json
index 1c1f6e8..cc4eac5 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "react-icons": "^5.3.0",
     "vite": "^5.4.8"
   }
 }