diff --git a/app.js b/app.js
index a037764..5e2420b 100644
--- a/app.js
+++ b/app.js
@@ -24,10 +24,50 @@ const capitalized = string => string[0].toUpperCase() + string.slice(1).toLowerC
 
 app.locals.title = `${capitalized(projectName)}- Generated with Ironlauncher`;
 
+
+app.use(express.static('../public'));
+app.get('/stylesheets/style.css', (req, res) => {
+    res.sendFile(__dirname + '/public/stylesheets/style.css');
+});
+
+app.get('/images/cinema.jpg', (req, res) => {
+    res.sendFile(__dirname + '/public/images/cinema.jpg');
+});
+
+
+
+
+
+
+
 // 👇 Start handling routes here
 const index = require('./routes/index');
 app.use('/', index);
 
+app.get('/movies.hbs', (req, res) => {
+    // Your route handling logic here
+    res.render('movies', { movies: [] });
+});
+
+const Movie = require('./models/Movie.model');
+app.get('/', async (req, res) => {
+    try {
+        // Fetch movies data from the database
+        const movies = await Movie.find();
+
+        // Render the movies.hbs template and pass the movies data
+        res.render('movies', { movies });
+    } catch (error) {
+        console.error('Error fetching movies:', error);
+        res.status(500).send('Internal Server Error');
+    }
+});
+
+const Moviesroute = require("./routes/index.js");
+app.use('/',Moviesroute);
+
+
+
 // ❗ To handle errors. Routes that don't exist or errors that you handle in specific routes
 require('./error-handling')(app);
 
diff --git a/db/index.js b/db/index.js
index c8cf065..5b7c532 100644
--- a/db/index.js
+++ b/db/index.js
@@ -5,7 +5,7 @@ const mongoose = require("mongoose");
 // ℹ️ Sets the MongoDB URI for our app to have access to it.
 // If no env has been set, we dynamically set it to whatever the folder name was upon the creation of the app
 
-const MONGO_URI = process.env.MONGODB_URI || "mongodb://localhost/lab-express-cinema";
+const MONGO_URI = process.env.MONGODB_URI || "mongodb://127.0.0.1:27017/lab-express-cinema";
 
 mongoose
   .connect(MONGO_URI)
diff --git a/models/Movie.model.js b/models/Movie.model.js
new file mode 100644
index 0000000..6dc942e
--- /dev/null
+++ b/models/Movie.model.js
@@ -0,0 +1,17 @@
+// models/Movie.model.js
+
+
+const mongoose = require('mongoose');
+
+const movieSchema = new mongoose.Schema({
+  title: { type: String, required: true },
+  director: { type: String, required: true },
+  stars: { type: [String], required: true },
+  image: { type: String, required: true },
+  description: { type: String, required: true },
+  showtimes: { type: [String], required: true }
+});
+
+const Movie = mongoose.model('Movie', movieSchema);
+
+module.exports = Movie;
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 9453385..39b9ba3 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -6,3 +6,42 @@ body {
 a {
   color: #00B7FF;
 }
+
+.movie{
+  border: 1px solid black;
+}
+
+.container img{
+  width: 100%;
+  
+}
+
+/* style.css */
+
+/* Center align the content */
+.container {
+  margin-top: 50px;
+}
+
+/* Style individual movie items */
+.movie {
+  margin-bottom: 20px;
+}
+
+.movie img {
+  width: 100%;
+  height: auto;
+}
+
+.movie h2 {
+  margin-top: 10px;
+}
+
+.movie p {
+  margin-bottom: 10px;
+}
+
+/* Add spacing between columns */
+.col {
+  padding: 0 15px;
+}
diff --git a/routes/index.js b/routes/index.js
index 3647403..3e0eaa7 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -1,7 +1,46 @@
 const express = require('express');
 const router = express.Router();
+const Movies = require("../models/Movie.model.js");
+
 
 /* GET home page */
 router.get('/', (req, res, next) => res.render('index'));
 
+router.get('/movies',(req, res, next) =>{
+    Movies.find()
+    .then(allMoviesFromDB => {
+      
+      console.log('Retrieved books from DB:', allMoviesFromDB);
+
+      res.render('movies', { movies: allMoviesFromDB });
+    })
+    .catch(error => {
+      console.log('Error while getting the books from the DB: ', error);
+
+     
+      next(error);
+    });
+});
+
+
+router.get('/movies/:id', async (req, res) => {
+  try {
+    const movies = await Movies.findById(req.params.id);
+    if (!movies) {
+      res.status(404).render('not-found');
+      return;
+    }
+    res.render('movie', { moviesData });
+  } catch (err) {
+    console.error('Error fetching movie details:', err);
+    res.status(500).render('error');
+  }
+});
+
+
+
+
+
+
+
 module.exports = router;
diff --git a/seeds/movies.seed.js b/seeds/movies.seed.js
index 39e1359..9ab2f4f 100644
--- a/seeds/movies.seed.js
+++ b/seeds/movies.seed.js
@@ -1,4 +1,10 @@
-const movies = [
+import { connect, connection } from 'mongoose';
+import { insertMany } from '../models/Movie.model';
+
+
+
+
+const moviesData = [
     {
       title: "A Wrinkle in Time",
       director: "Ava DuVernay",
@@ -83,6 +89,21 @@ const movies = [
 
 
 // Add here the script that will be run to actually seed the database (feel free to refer to the previous lesson)
+const MONGO_URI = process.env.MONGODB_URI || "mongodb://127.0.0.1:27017/lab-express-cinema";
+
+connect(MONGO_URI , { useNewUrlParser: true, useUnifiedTopology: true })
+  .then(() => {
+    return insertMany(moviesData);
+  })
+  .then(moviesFromDB => {
+    console.log(`Successfully seeded ${moviesFromDB.length} movies to the database.`);
+    connection.close();
+  })
+  .catch(error => {
+    console.error(`Error seeding movies: ${error}`);
+    connection.close();
+  });
+
 
   
 
diff --git a/views/index.hbs b/views/index.hbs
index 1f308fd..0377c4a 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -1,2 +1,18 @@
-<h1>{{title}}</h1>
-<p>Welcome to {{title}}</p>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home Page</title>
+    <link rel="stylesheet" href="../public/stylesheets/style.css"> <!-- Link your CSS file here if needed -->
+</head>
+<body>
+    <div class="container">
+        <h1>Cinema Root Learn</h1>
+        <img src="../public/images/cinema.jpg" alt="Movie Image">
+        <p>Discover the latest movies and showtimes</p>
+        <a href="movies.hbs"><button>Check Movies</button></a>
+        
+    </div>
+</body>
+</html>
diff --git a/views/layout.hbs b/views/layout.hbs
index f2c4e0c..79cb40c 100644
--- a/views/layout.hbs
+++ b/views/layout.hbs
@@ -10,6 +10,7 @@
 <body>
 
   {{{body}}}
+  
 
   <script src="/js/script.js"></script>
 </body>
diff --git a/views/movies.hbs b/views/movies.hbs
new file mode 100644
index 0000000..ca59823
--- /dev/null
+++ b/views/movies.hbs
@@ -0,0 +1,25 @@
+
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>List of Movies</title>
+    <link rel="stylesheet" href="../public/stylesheets/style.css">
+    
+</head>
+<body>
+    <div class="container">
+        <h1>Click on the movie to check the showtimes!</h1>
+        {{#each movies}}
+       
+        <img  src="{{this.image}}" alt="{{this.title}}">
+        <h2>{{this.title}}</h2>
+        <p>{{this.description}}</p>
+        <a href="/movies/{{this._id}}"><button>See More</button> </a>
+    
+    {{/each}}
+    </div>
+</body>
+</html>