diff --git a/components/ComingSoonList.tsx b/components/ComingSoonList.tsx
new file mode 100644
index 0000000..5a68501
--- /dev/null
+++ b/components/ComingSoonList.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import MovieList from './MovieList';
+import { Movie } from '../types/Movie';
+import styles from './styling.module.css';
+
+const comingSoonMovies1: Movie[] = [
+    {
+        id: '1',
+        title: 'Movie 1',
+        description: 'Movie 1 description',
+        posterUrl: '/soonMovie1.jpg'
+    },
+    {
+        id: '2',
+        title: 'Movie 2',
+        description: 'Movie 2 description',
+        posterUrl: '/soonMovie2.jpg'
+    },
+    {
+        id: '3',
+        title: 'Movie 3',
+        description: 'Movie 3 description',
+        posterUrl: '/soonMovie3.jpg'
+    },
+    {
+        id: '4',
+        title: 'Movie 4',
+        description: 'Movie 4 description',
+        posterUrl: '/soonMovie4.jpg'
+    },
+];
+
+const comingSoonMovies2: Movie[] = [
+    {
+        id: '1',
+        title: 'Movie 1',
+        description: 'Movie 1 description',
+        posterUrl: '/soonMovie5.jpg'
+    },
+    {
+        id: '2',
+        title: 'Movie 2',
+        description: 'Movie 2 description',
+        posterUrl: '/soonMovie6.jpg'
+    },
+    {
+        id: '3',
+        title: 'Movie 3',
+        description: 'Movie 3 description',
+        posterUrl: '/soonMovie7.jpg'
+    },
+    {
+        id: '4',
+        title: 'Movie 4',
+        description: 'Movie 4 description',
+        posterUrl: '/soonMovie8.jpg'
+    },
+];
+
+const ComingSoonList: React.FC = () => {
+    return (
+        <div>
+            <h2 className={styles['centerText']}>Coming Soon</h2>
+            <MovieList movies={comingSoonMovies1} />
+            <MovieList movies={comingSoonMovies2} />
+        </div>
+    );
+};
+
+export default ComingSoonList;
diff --git a/components/MovieCard.tsx b/components/MovieCard.tsx
new file mode 100644
index 0000000..6fc3789
--- /dev/null
+++ b/components/MovieCard.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import Link from 'next/link';
+
+interface MovieCardProps {
+    id: string;
+    posterUrl: string;
+}
+
+const MovieCard: React.FC<MovieCardProps> = ({ id, posterUrl }) => {
+    return (
+        <Link href={`/movies/${id}`}>
+            <div className="movie-card">
+                <img src={posterUrl} />
+            </div>
+        </Link>
+    );
+};
+
+export default MovieCard;
diff --git a/components/MovieList.tsx b/components/MovieList.tsx
new file mode 100644
index 0000000..c34487a
--- /dev/null
+++ b/components/MovieList.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import MovieCard from './MovieCard';
+import { Movie } from '../types/Movie';
+
+interface MovieListProps {
+    movies: Movie[];
+}
+
+const MovieList: React.FC<MovieListProps> = ({ movies }) => {
+    return (
+        <div className="movie-list">
+            {movies.map(movie => (
+                <MovieCard 
+                    key={movie.id}
+                    id={movie.id}
+                    posterUrl={movie.posterUrl}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default MovieList;
diff --git a/components/MovieSelection.tsx b/components/MovieSelection.tsx
new file mode 100644
index 0000000..b464601
--- /dev/null
+++ b/components/MovieSelection.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import MovieList from './MovieList';
+import { Movie } from '../types/Movie';
+import styles from './styling.module.css';
+
+const nowPlayingMovies: Movie[] = [
+    {
+        id: '1',
+        title: 'Movie 1',
+        description: 'Movie 1 description',
+        posterUrl: '/nowMovie1.jpg'
+    },
+    {
+        id: '2',
+        title: 'Movie 2',
+        description: 'Movie 2 description',
+        posterUrl: '/nowMovie2.jpg'
+    },
+    {
+        id: '3',
+        title: 'Movie 3',
+        description: 'Movie 3 description',
+        posterUrl: '/nowMovie3.jpg'
+    },
+    {
+        id: '4',
+        title: 'Movie 4',
+        description: 'Movie 4 description',
+        posterUrl: '/nowMovie4.jpg'
+    },
+];
+
+const MovieSelectionList: React.FC = () => {
+    return (
+        <div>
+            <h2 className={styles['centerText']}>Movie Selection</h2>
+            <MovieList movies={nowPlayingMovies} />
+        </div>
+    );
+};
+
+export default MovieSelectionList;
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
new file mode 100644
index 0000000..691f5cb
--- /dev/null
+++ b/components/NavBar.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+
+const NavBar: React.FC = () => {
+    return (
+        <nav style={{ display: 'flex', alignItems: 'center' }}>
+            {/* Logo Section */}
+            <div style={{ marginRight: '20px' }}>
+                <Link href="/">
+                    <Image src="/CGVLogo.png" alt="Logo" width={137} height={137} />
+                </Link>
+            </div>
+            
+            {/* Navigation Links */}
+            <ul style={{ display: 'flex', listStyle: 'none', padding: 0, margin: 0 }}>
+                <li style={{ marginRight: '15px' }}><Link href="/moviespage">Movies</Link></li>
+                <li style={{ marginRight: '15px' }}><Link href="/cinemas">Cinemas</Link></li>
+                <li style={{ marginRight: '15px' }}><Link href="/promotions">Promotion</Link></li>
+                <li style={{ marginRight: '15px' }}><Link href="/membershipOut">Membership</Link></li>
+                <li style={{ marginRight: '15px' }}><Link href="/login">Concession</Link></li>
+                <li style={{ marginRight: '15px' }}><Link href="/special">Special</Link></li>
+            </ul>
+        </nav>
+    );
+};
+
+export default NavBar;
diff --git a/components/NowPlayingList.tsx b/components/NowPlayingList.tsx
new file mode 100644
index 0000000..a1d8288
--- /dev/null
+++ b/components/NowPlayingList.tsx
@@ -0,0 +1,154 @@
+import React from 'react';
+import MovieList from './MovieList';
+import { Movie } from '../types/Movie';
+import styles from './styling.module.css';
+
+const nowPlayingMovies1: Movie[] = [
+    {
+        id: '1',
+        title: 'Movie 1',
+        description: 'Movie 1 description',
+        posterUrl: '/nowMovie1.jpg'
+    },
+    {
+        id: '2',
+        title: 'Movie 2',
+        description: 'Movie 2 description',
+        posterUrl: '/nowMovie2.jpg'
+    },
+    {
+        id: '3',
+        title: 'Movie 3',
+        description: 'Movie 3 description',
+        posterUrl: '/nowMovie3.jpg'
+    },
+    {
+        id: '4',
+        title: 'Movie 4',
+        description: 'Movie 4 description',
+        posterUrl: '/nowMovie4.jpg'
+    },
+];
+
+const nowPlayingMovies2: Movie[] = [
+    {
+        id: '5',
+        title: 'Movie 5',
+        description: 'Movie 5 description',
+        posterUrl: '/nowMovie5.jpg'
+    },
+    {
+        id: '6',
+        title: 'Movie 6',
+        description: 'Movie 6 description',
+        posterUrl: '/nowMovie6.jpg'
+    },
+    {
+        id: '7',
+        title: 'Movie 7',
+        description: 'Movie 7 description',
+        posterUrl: '/nowMovie7.jpg'
+    },
+    {
+        id: '8',
+        title: 'Movie 8',
+        description: 'Movie 8 description',
+        posterUrl: '/nowMovie8.jpg'
+    },
+];
+
+const nowPlayingMovies3: Movie[] = [
+    {
+        id: '9',
+        title: 'Movie 9',
+        description: 'Movie 9 description',
+        posterUrl: '/nowMovie9.jpg'
+    },
+    {
+        id: '10',
+        title: 'Movie 10',
+        description: 'Movie 10 description',
+        posterUrl: '/nowMovie10.jpg'
+    },
+    {
+        id: '11',
+        title: 'Movie 11',
+        description: 'Movie 11 description',
+        posterUrl: '/nowMovie11.jpg'
+    },
+    {
+        id: '12',
+        title: 'Movie 12',
+        description: 'Movie 12 description',
+        posterUrl: '/nowMovie12.jpg'
+    },
+];
+
+const nowPlayingMovies4: Movie[] = [
+    {
+        id: '13',
+        title: 'Movie 13',
+        description: 'Movie 13 description',
+        posterUrl: '/nowMovie13.jpg'
+    },
+    {
+        id: '14',
+        title: 'Movie 14',
+        description: 'Movie 14 description',
+        posterUrl: '/nowMovie14.jpg'
+    },
+    {
+        id: '15',
+        title: 'Movie 15',
+        description: 'Movie 15 description',
+        posterUrl: '/nowMovie15.jpg'
+    },
+    {
+        id: '16',
+        title: 'Movie 16',
+        description: 'Movie 16 description',
+        posterUrl: '/nowMovie16.jpg'
+    },
+];
+
+const nowPlayingMovies5: Movie[] = [
+    {
+        id: '17',
+        title: 'Movie 17',
+        description: 'Movie 17 description',
+        posterUrl: '/nowMovie17.jpg'
+    },
+    {
+        id: '18',
+        title: 'Movie 18',
+        description: 'Movie 18 description',
+        posterUrl: '/nowMovie18.jpg'
+    },
+    {
+        id: '19',
+        title: 'Movie 19',
+        description: 'Movie 19 description',
+        posterUrl: '/nowMovie19.jpg'
+    },
+    {
+        id: '20',
+        title: 'Movie 20',
+        description: 'Movie 20 description',
+        posterUrl: '/nowMovie20.jpg'
+    },
+];
+
+const NowPlayingList: React.FC = () => {
+    return (
+        <div>
+            <h2 className={styles['centerText']}>Now Playing</h2>
+            <MovieList movies={nowPlayingMovies1} />
+            <MovieList movies={nowPlayingMovies2} />
+            <MovieList movies={nowPlayingMovies3} />
+            <MovieList movies={nowPlayingMovies4} />
+            <MovieList movies={nowPlayingMovies5} />
+        </div>
+    );
+};
+
+export default NowPlayingList;
diff --git a/components/SocSignBar.tsx b/components/SocSignBar.tsx
new file mode 100644
index 0000000..5bfe7f2
--- /dev/null
+++ b/components/SocSignBar.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import Link from 'next/link';
+
+const SocSignBar: React.FC = () => {
+    return (
+        <nav>
+            <ul>
+                <li><Link href="/">news</Link></li>
+                <li><Link href="/login">login</Link></li>
+                <li><Link href="/register">sign up</Link></li>
+            </ul>
+        </nav>
+    );
+};
+
+export default SocSignBar;
diff --git a/components/styling.module.css b/components/styling.module.css
new file mode 100644
index 0000000..aa0d1ee
--- /dev/null
+++ b/components/styling.module.css
@@ -0,0 +1,17 @@
+.centerSection {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 10vh;
+    background-color: #FDF6DC;
+    padding: 20px;
+    text-align: center;
+}
+
+.centerText {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/data/movies.ts b/data/movies.ts
new file mode 100644
index 0000000..d87fce8
--- /dev/null
+++ b/data/movies.ts
@@ -0,0 +1,17 @@
+const movies = [
+    {
+        id: '1',
+        title: 'Movie 1',
+        description: 'Movie 1 desc',
+        posterUrl: '/images/inception.jpg'
+    },
+    {
+        id: '2',
+        title: 'Movie 2',
+        description: 'Movie 2 desc',
+        posterUrl: '/images/dark-knight.jpg'
+    },
+    // Add more movies as needed
+];
+
+export default movies;
diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 0000000..d6788b1
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1,5 @@
+declare module '*.module.css' {
+    const classes: { [key: string]: string };
+    export default classes;
+  }
+  
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 9344003..4ab00ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@hookform/error-message": "2.0.1",
         "@hookform/resolvers": "3.0.1",
         "antd": "5.4.0",
+        "axios": "^1.6.8",
         "dayjs": "1.11.7",
         "http-proxy": "1.18.1",
         "jotai": "2.0.3",
@@ -29,6 +30,7 @@
         "zod": "3.21.4"
       },
       "devDependencies": {
+        "@types/css-modules": "^1.0.5",
         "@types/http-proxy": "^1.17.10",
         "@types/node": "^18.15.11",
         "@types/nprogress": "^0.2.0",
@@ -671,6 +673,12 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/css-modules": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/css-modules/-/css-modules-1.0.5.tgz",
+      "integrity": "sha512-oeKafs/df9lwOvtfiXVliZsocFVOexK9PZtLQWuPeuVCFR7jwiqlg60lu80JTe5NFNtH3tnV6Fs/ySR8BUPHAw==",
+      "dev": true
+    },
     "node_modules/@types/http-proxy": {
       "version": "1.17.10",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.10.tgz",
@@ -1191,6 +1199,11 @@
       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.14",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
@@ -1245,6 +1258,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -1489,6 +1512,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1701,6 +1735,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2535,9 +2577,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -2562,6 +2604,19 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -3613,6 +3668,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
@@ -4307,6 +4381,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
diff --git a/package.json b/package.json
index 3d75a9a..8fe2171 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "pre-commit-check": "tsc && next lint"
   },
   "devDependencies": {
+    "@types/css-modules": "^1.0.5",
     "@types/http-proxy": "^1.17.10",
     "@types/node": "^18.15.11",
     "@types/nprogress": "^0.2.0",
@@ -45,6 +46,7 @@
     "@hookform/error-message": "2.0.1",
     "@hookform/resolvers": "3.0.1",
     "antd": "5.4.0",
+    "axios": "^1.6.8",
     "dayjs": "1.11.7",
     "http-proxy": "1.18.1",
     "jotai": "2.0.3",
diff --git a/pages/IndexPage.module.css b/pages/IndexPage.module.css
new file mode 100644
index 0000000..ba490fd
--- /dev/null
+++ b/pages/IndexPage.module.css
@@ -0,0 +1,24 @@
+.centerSection {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 10vh;
+    background-color: #FDF6DC;
+    padding: 20px;
+    text-align: center;
+}
+
+.centerText {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+}
+
+.centerImage {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 20px 0;
+}
\ No newline at end of file
diff --git a/pages/cinemas.tsx b/pages/cinemas.tsx
new file mode 100644
index 0000000..95f4ec0
--- /dev/null
+++ b/pages/cinemas.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import NavBar from '../components/NavBar';
+import SocSignBar from '../components/SocSignBar';
+import styles from './IndexPage.module.css';
+
+const cinemaData = {
+    Jakarta: ['Grand Indonesia', 'Pacific Place', 'Central Park', 'Slipi Jaya', 'Green Pramuka Mall', 'Bella Terra Lifestyle Center', 'Transmart Cempaka Putih', 'Aeon Mall JGC', 'FX Sudirman', 'Sunter Mall', 'Buaran Plaza', 'Poins Mall'],
+    Bandung: ['Paris Van Java', 'Miko Mall', 'BEC Mall', '23 Paskal Shopping Center', 'Metro Indah Mall', 'Kings Shopping Center'],
+    'Tangerang Selatan': ['Teras Kota', 'Transmart Graha Bintaro', 'Paradise Walk Serpong'],
+    Bekasi: ['Bekasi Cyber Park', 'Bekasi Trade Center', 'Lagoon Avenue Bekasi'],
+    Balikpapan: ['Plaza Balikpapan'],
+    Yogyakarta: ['Jwalk Mall', 'Pakuwon Mall Jogja', 'Transmart Maguwo'],
+    Tangerang: ['Bandara City Mall', 'Ecoplaza Citraraya Cikupa', 'Grand Batavia', 'Mal Ciputra Tangerang'],
+    Cirebon: ['Grage City Mall', 'Transmart Cirebon'],
+    Surabaya: ['Marvell City', 'BG Junction', 'Maspion Square'],
+    Karawang: ['Festive Walk', 'Technomart', 'Cikampek Mall'],
+    Mojokerto: ['Sunrise Mall'],
+    Medan: ['Focal Point'],
+    Purwokerto: ['Rita Supermall'],
+    Palembang: ['Social Market', 'Transmart Palembang', 'PTC Mall'],
+    Depok: ['Depok Mall', 'DTC Depok'],
+    Tegal: ['Transmart Tegal'],
+    Pekanbaru: ['Transmart Pekanbaru', 'Holiday Pekanbaru', 'Studio Pekanbaru'],
+    Mataram: ['Transmart Mataram'],
+    Solo: ['Transmart Solo'],
+    Lampung: ['Transmart Lampung'],
+    Gresik: ['Icon Mall Gresik'],
+    Bogor: ['Vivo Sentul'],
+    Blitar: ['Blitar Square'],
+    Samarinda: ['Plaza Mulia'],
+    Batam: ['Park Avenue Batam', 'Grand Batam Mall'],
+    Purwakarta: ['Sadang Terminal Square'],
+    Madiun: ['Plaza Lawu Madiun'],
+    Kediri: ['Kediri Mall'],
+    Cikarang: ['Living Plaza Jababeka'],
+    Probolinggo: ['Wijaya Kusuma'],
+    Makassar: ['Panakkukang Square'],
+    Malang: ['Malang City Point'],
+    Jember: ['Roxy Square Jember'],
+    Padang: ['Raya Padang'],
+    'Tangerang City': ['Foodmosphere'],
+    Serang: ['Ecoplaza Citra Maja Raya'],
+    Manado: ['Grand Kawanua Manado'],
+};
+
+const CinemasPage: React.FC = () => {
+    const [openCity, setOpenCity] = useState<string | null>(null);
+
+    const handleCityClick = (city: string) => {
+        setOpenCity(openCity === city ? null : city);
+    };
+
+    return (
+        <div>
+            <div className={styles['centerSection']}>
+                <SocSignBar />
+                <h1>CULTUREPLEX</h1>
+                <NavBar />
+            </div>
+            <ul>
+                {Object.keys(cinemaData).map(city => (
+                    <li key={city}>
+                        <button onClick={() => handleCityClick(city)}>
+                            {city}
+                        </button>
+                        {openCity === city && (
+                            <ul>
+                                {cinemaData[city].map(mall => (
+                                    <li key={mall}>{mall}</li>
+                                ))}
+                            </ul>
+                        )}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+export default CinemasPage;
diff --git a/pages/index.tsx b/pages/index.tsx
index 6c0943a..435cc66 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,15 +1,22 @@
-import { WithDefaultLayout } from '../components/DefautLayout';
 import { Title } from '../components/Title';
 import { Page } from '../types/Page';
+import NavBar from '../components/NavBar';
+import SocSignBar from '../components/SocSignBar';
+import MovieSelectionList from '../components/MovieSelection';
+import styles from './IndexPage.module.css';
 
 const IndexPage: Page = () => {
     return (
         <div>
             <Title>Home</Title>
-            Hello World!
+            <div className={styles['centerSection']}>
+                <SocSignBar />
+                <h1>CULTUREPLEX</h1>
+                <NavBar />
+            </div>
+            <MovieSelectionList />
         </div>
     );
 }
 
-IndexPage.layout = WithDefaultLayout;
 export default IndexPage;
diff --git a/pages/login.tsx b/pages/login.tsx
new file mode 100644
index 0000000..ab43ade
--- /dev/null
+++ b/pages/login.tsx
@@ -0,0 +1,25 @@
+import { useState } from 'react';
+
+const Login: React.FC = () => {
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+  };
+
+  return (
+    <div className="flex justify-center items-center min-h-screen bg-gray-100">
+      <div className="bg-white p-8 rounded shadow-md w-96">
+        <h2 className="text-2xl font-bold mb-4">Login</h2>
+        <form onSubmit={handleSubmit}>
+          <input type="text" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} className="input-field mb-4" required />
+          <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} className="input-field mb-4" required />
+          <button type="submit" className="btn-primary w-full">Login</button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
\ No newline at end of file
diff --git a/pages/membershipOut.tsx b/pages/membershipOut.tsx
new file mode 100644
index 0000000..8e54400
--- /dev/null
+++ b/pages/membershipOut.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Image from 'next/image';
+import NavBar from '../components/NavBar';
+import SocSignBar from '../components/SocSignBar';
+import styles from './IndexPage.module.css';
+
+const MembershipPage: React.FC = () => {
+    return (
+        <div>
+            <div className={styles['centerSection']}>
+                <SocSignBar />
+                <h1>CULTUREPLEX</h1>
+                <NavBar />
+            </div>
+            <h1 className={styles['centerText']}>Membership</h1>
+            <div className={styles['centerImage']}>
+            <Image src="/membershipImage.png" alt="Membership Image" width={500} height={300} />
+            </div>
+        </div>
+    );
+};
+
+export default MembershipPage;
\ No newline at end of file
diff --git a/pages/movies/[id].tsx b/pages/movies/[id].tsx
new file mode 100644
index 0000000..f8a6a95
--- /dev/null
+++ b/pages/movies/[id].tsx
@@ -0,0 +1,38 @@
+import { GetStaticPaths, GetStaticProps } from 'next';
+import { Movie } from '../../types/Movie';
+import moviesData from '../../data/movies';
+
+interface MovieDetailProps {
+    movie: Movie | undefined;
+}
+
+const MovieDetail: React.FC<MovieDetailProps> = ({ movie }) => {
+    if (!movie) {
+        return <p>Movie not found.</p>;
+    }
+
+    return (
+        <div>
+            <h1>{movie.title}</h1>
+            <img src={movie.posterUrl} alt={`${movie.title} poster`} />
+            <p>{movie.description}</p>
+        </div>
+    );
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+    const paths = moviesData.map((movie) => ({
+        params: { id: movie.id }
+    }));
+
+    return { paths, fallback: false };
+};
+
+export const getStaticProps: GetStaticProps = async (context) => {
+    const { id } = context.params!;
+    const movie = moviesData.find((movie) => movie.id === id);
+
+    return { props: { movie } };
+};
+
+export default MovieDetail;
diff --git a/pages/moviespage.tsx b/pages/moviespage.tsx
new file mode 100644
index 0000000..dd326ca
--- /dev/null
+++ b/pages/moviespage.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import NowPlayingList from '../components/NowPlayingList';
+import ComingSoonList from '../components/ComingSoonList';
+import NavBar from '../components/NavBar';
+import SocSignBar from '../components/SocSignBar';
+import styles from './IndexPage.module.css';
+
+const MoviesPage: React.FC = () => {
+    return (
+        <div>
+            <div className={styles['centerSection']}>
+                <SocSignBar />
+                <h1>CULTUREPLEX</h1>
+                <NavBar />
+            </div>
+            <NowPlayingList />
+            <ComingSoonList />
+        </div>
+    );
+};
+
+export default MoviesPage;
diff --git a/pages/promotion/[id].tsx b/pages/promotion/[id].tsx
new file mode 100644
index 0000000..c761ea6
--- /dev/null
+++ b/pages/promotion/[id].tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import Image from 'next/image';
+import NavBar from '../../components/NavBar';
+import SocSignBar from '../../components/SocSignBar';
+
+const promotions = [
+    {
+        id: 1,
+        name: 'Promotion 1',
+        imageUrl: '/descPromotion1.png',
+    },
+    {
+        id: 2,
+        name: 'Promotion 2',
+        imageUrl: '/descPromotion2.jpg',
+    },
+    {
+        id: 3,
+        name: 'Promotion 3',
+        imageUrl: '/descPromotion3.jpg',
+    },
+    {
+        id: 4,
+        name: 'Promotion 4',
+        imageUrl: '/descPromotion4.jpg',
+    },
+    {
+        id: 5,
+        name: 'Promotion 5',
+        imageUrl: '/descPromotion5.jpg',
+    },
+];
+
+const PromotionDetailPage: React.FC = () => {
+    const router = useRouter();
+    const { id } = router.query;
+    const promotion = promotions.find(promo => promo.id === parseInt(id as string));
+
+    if (!promotion) {
+        return <p>Promotion not found</p>;
+    }
+
+    return (
+        <div>
+            <SocSignBar />
+            <h1>CULTUREPLEX</h1>
+            <NavBar />
+            <h1>{promotion.name}</h1>
+            <Image src={promotion.imageUrl} alt={promotion.name} width={400} height={400} />
+        </div>
+    );
+};
+
+export default PromotionDetailPage;
diff --git a/pages/promotions.tsx b/pages/promotions.tsx
new file mode 100644
index 0000000..998e04a
--- /dev/null
+++ b/pages/promotions.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import NavBar from '../components/NavBar';
+import SocSignBar from '../components/SocSignBar';
+import styles from './IndexPage.module.css';
+
+const promotions = [
+    {
+        id: 1,
+        name: 'BUY 1 GET 1 FREE dengan tukar point MyTelkomsel kamu!',
+        imageUrl: '/promotion1.jpg',
+    },
+    {
+        id: 2,
+        name: 'Give Best Moment with CGV Gift Card!',
+        imageUrl: '/promotion2.jpg',
+    },
+    {
+        id: 3,
+        name: 'PICK YOUR PRESENT! Get Marhen J Bag + Special Class Ticket + Popcorn',
+        imageUrl: '/promotion3.jpg',
+    },
+    {
+        id: 4,
+        name: 'Nonton Hemat Pake QRIS Jago Cashback 40%!',
+        imageUrl: '/promotion4.jpg',
+    },
+    {
+        id: 5,
+        name: 'Nonton Makin Seru Dengan Buy 3 Get 1 Ticket dari Kartu Kredit OCBC!',
+        imageUrl: '/promotion5.jpg',
+    },
+];
+
+const PromotionsPage: React.FC = () => {
+    return (
+        <div>
+            <div className={styles['centerSection']}>
+                <SocSignBar />
+                <h1>CULTUREPLEX</h1>
+                <NavBar />
+            </div>
+            <h1 className={styles['centerText']}>Promotions</h1>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' , justifyContent: 'center'}}>
+                {promotions.map(promotion => (
+                    <div key={promotion.id} style={{ border: '1px solid #ccc', padding: '10px', width: '200px' }}>
+                        <Image src={promotion.imageUrl} alt={promotion.name} width={200} height={200} />
+                        <h2>{promotion.name}</h2>
+                        <Link href={`/promotion/${promotion.id}`}>
+                            Read More
+                        </Link>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default PromotionsPage;
diff --git a/pages/register.tsx b/pages/register.tsx
new file mode 100644
index 0000000..01fc9ef
--- /dev/null
+++ b/pages/register.tsx
@@ -0,0 +1,134 @@
+import { useRouter } from 'next/router';
+import { Input, Button, Form, DatePicker, Select, notification } from 'antd';
+import { Page } from '@/types/Page';
+import styles from './IndexPage.module.css';
+import NavBar from '../components/NavBar';
+import SocSignBar from '../components/SocSignBar';
+
+const { Option } = Select;
+const { TextArea } = Input;
+
+interface FormData {
+  email: string;
+  birthdate: Date | null;
+  gender: string;
+  address: string;
+  username: string;
+  password: string;
+}
+
+const RegistrationPage: Page = () => {
+
+    const [form] = Form.useForm();
+    const router = useRouter();
+
+    const handleSubmit = async (values: FormData) => {
+        try {
+        const response = await fetch('/api/be/api/v1/Auth/Register', {
+            method: 'POST',
+            headers: {
+            'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(values)
+        });
+        if (response.ok) {
+            notification.success({
+            message: 'Registration Successful',
+            description: 'You will be redirected to the Login page.'
+            });
+            router.push('/login');
+        } else {
+            throw new Error('Failed to register');
+        }
+        } catch (error) {
+        notification.error({
+            message: 'Registration Failed',
+            description: 'An error occurred during registration.'
+        });
+        }
+    };
+
+
+    const validateAge = (_, value: Date | null) => {
+        if (!value) {
+            return Promise.reject(new Error('Please select your birthdate!'));
+        }
+    
+        const today = new Date();
+        const birthdate = new Date(value);
+        const ageDiffMs = today.getTime() - birthdate.getTime();
+        const ageDate = new Date(ageDiffMs);
+        const age = Math.abs(ageDate.getUTCFullYear() - 1970);
+    
+        if (age >= 14) {
+        return Promise.resolve();
+        }
+        return Promise.reject(new Error('You must be at least 14 years old!'));
+    };
+  
+
+    return (
+        <div className=' flex h-screen items-center justify-center bg-gray-100'>
+            <div className="max-w-xl mx-auto mt-10 border-slate-500 items-center flexbg-gray-100 w-full">
+                <div className='bg-white w-full py-8 px-4 sm:rounded-lg sm:px-10 shadow-lg border-slate-400 border-2 items-center '>
+                    <div className={styles['centerSection']}>
+                        <SocSignBar />
+                        <h1>CULTUREPLEX</h1>
+                        <NavBar />
+                    </div>
+                    <h1 className="text-xl font-semibold mb-6 text-center ">Register</h1>
+                    <Form form={form} layout="vertical" onFinish={handleSubmit}>
+                        <Form.Item name="email" label="Email" rules={[{ required: true, type: 'email', message: 'Please input a valid email!' }]}>
+                            <Input />
+                        </Form.Item>
+
+                        <Form.Item
+                            name="birthdate"
+                            label="Birthdate"
+                            rules={[
+                                {
+                                required: true,
+                                message: 'Please select your birthdate!',
+                                },
+                                {
+                                validator: validateAge,
+                                }
+                            ]}
+                            >
+                            <DatePicker className="w-full" />
+                        </Form.Item>
+
+                        <Form.Item name="gender" label="Gender" rules={[{ required: true, message: 'Please select your gender!' }]}>
+                            <Select placeholder="Select gender">
+                                <Option value="M">Male</Option>
+                                <Option value="F">Female</Option>
+                                <Option value="O">Other</Option>
+                            </Select>
+                        </Form.Item>
+
+                        <Form.Item name="address" label="Address" rules={[{ required: true, message: 'Please input your address!', max: 255 }]}>
+                            <TextArea rows={4} />
+                        </Form.Item>
+
+                        <Form.Item name="username" label="Username" rules={[{ required: true, max: 20, message: 'Please input your username!' }]}>
+                            <Input />
+                        </Form.Item>
+
+                        <Form.Item name="password" label="Password" rules={[{ required: true, min: 8, max: 64, message: 'Please input a valid password!' }]}>
+                            <Input.Password />
+                        </Form.Item>
+
+                        <Form.Item>
+                            <Button type="primary" htmlType="submit" className="w-full bg-green-400">
+                                Register
+                            </Button>
+                        </Form.Item>
+                    </Form>
+                </div>
+            </div>
+        </div>
+        
+    );
+}
+
+export default RegistrationPage;
\ No newline at end of file
diff --git a/pages/special.tsx b/pages/special.tsx
new file mode 100644
index 0000000..91a0d6d
--- /dev/null
+++ b/pages/special.tsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import NavBar from '../components/NavBar';
+import SocSignBar from '../components/SocSignBar';
+import styles from './IndexPage.module.css';
+
+const auditoriums = [
+    { id: 1, name: 'Gold Class', imageUrl: '/auditoriums1.jpg'},
+    { id: 2, name: 'Velvet Class', imageUrl: '/auditoriums2.jpg'},
+    { id: 3, name: 'Satin Class', imageUrl: '/auditoriums3.jpg'},
+    { id: 4, name: 'Sweetbox', imageUrl: '/auditoriums4.jpg'},
+    { id: 5, name: '4DX', imageUrl: '/auditoriums5.jpg'},
+    { id: 6, name: 'ScreenX', imageUrl: '/auditoriums6.jpg'},
+    { id: 7, name: 'Starium', imageUrl: '/auditoriums7.jpg'},
+    { id: 8, name: 'SphereX', imageUrl: '/auditoriums8.jpg'},
+    { id: 9, name: 'Private Box', imageUrl: '/auditoriums9.png'},
+];
+
+const sports = [
+    { id: 10, name: 'SPORTS HALL FX SUDIRMAN', imageUrl: '/sports1.jpg'},
+    { id: 11, name: 'SPORTS HALL TERAS KOTA', imageUrl: '/sports2.jpg'},
+    { id: 12, name: 'SPORTS HALL CIPUTRA TANGERANG', imageUrl: '/sports3.jpg'},
+];
+
+const SpecialPage: React.FC = () => {
+    const [showAuditoriums, setShowAuditoriums] = useState(false);
+    const [showSports, setShowSports] = useState(false);
+
+    return (
+        <div>
+            <div className={styles['centerSection']}>
+                <SocSignBar />
+                <h1>CULTUREPLEX</h1>
+                <NavBar />
+            </div>
+            <div>
+                <button onClick={() => setShowAuditoriums(!showAuditoriums)}>Auditoriums</button>
+                {showAuditoriums && (
+                    <div>
+                        {auditoriums.map(auditorium => (
+                            <div key={auditorium.id}>
+                                <Link href={`/special/${auditorium.id}`}>
+                                    <Image src={auditorium.imageUrl} alt={auditorium.name} width={150} height={150} />
+                                    <p>{auditorium.name}</p>
+                                </Link>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+            <div>
+                <button onClick={() => setShowSports(!showSports)}>Sports</button>
+                {showSports && (
+                    <div>
+                        {sports.map(sport => (
+                            <div key={sport.id}>
+                                <Link href={`/special/${sport.id}`}>
+                                    <Image src={sport.imageUrl} alt={sport.name} width={150} height={150} />
+                                    <p>{sport.name}</p>
+                                </Link>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default SpecialPage;
diff --git a/pages/special/[id].tsx b/pages/special/[id].tsx
new file mode 100644
index 0000000..e63afbf
--- /dev/null
+++ b/pages/special/[id].tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import Image from 'next/image';
+
+const items = [
+    { id: 1, name: 'Gold Class', imageUrl: '/auditoriums1.jpg', imageUrlDesc: '/descAud1.jpg'},
+    { id: 2, name: 'Velvet Class', imageUrl: '/auditoriums2.jpg', imageUrlDesc: '/descAud2.jpg'},
+    { id: 3, name: 'Satin Class', imageUrl: '/auditoriums3.jpg', imageUrlDesc: '/descAud3.jpg'},
+    { id: 4, name: 'Sweetbox', imageUrl: '/auditoriums4.jpg', imageUrlDesc: '/descAud4.jpg'},
+    { id: 5, name: '4DX', imageUrl: '/auditoriums5.jpg', imageUrlDesc: '/descAud5.jpg'},
+    { id: 6, name: 'ScreenX', imageUrl: '/auditoriums6.jpg', imageUrlDesc: '/descAud6.jpg'},
+    { id: 7, name: 'Starium', imageUrl: '/auditoriums7.jpg', imageUrlDesc: '/descAud7.jpg'},
+    { id: 8, name: 'SphereX', imageUrl: '/auditoriums8.jpg', imageUrlDesc: '/descAud8.jpg'},
+    { id: 9, name: 'Private Box', imageUrl: '/auditoriums9.png', imageUrlDesc: '/descAud9.jpg'},
+    { id: 10, name: 'SPORTS HALL FX SUDIRMAN', imageUrl: '/sports1.jpg', imageUrlDesc: '/descSpo1.jpg'},
+    { id: 11, name: 'SPORTS HALL TERAS KOTA', imageUrl: '/sports2.jpg', imageUrlDesc: '/descSpo2.jpg'},
+    { id: 12, name: 'SPORTS HALL CIPUTRA TANGERANG', imageUrl: '/sports3.jpg', imageUrlDesc: '/descSpo3.jpg'},
+];
+
+const SpecialDetailPage: React.FC = () => {
+    const router = useRouter();
+    const { id } = router.query;
+    const item = items.find(item => item.id === parseInt(id as string));
+
+    if (!item) {
+        return <p>Item not found</p>;
+    }
+
+    return (
+        <div>
+            <Image src={item.imageUrl} alt={item.name} width={500} height={300} />
+            <h1>{item.name}</h1>
+            <Image src={item.imageUrlDesc} alt={item.name} width={500} height={300} />
+        </div>
+    );
+};
+
+export default SpecialDetailPage;
diff --git a/public/CGVLogo.png b/public/CGVLogo.png
new file mode 100644
index 0000000..13f6972
Binary files /dev/null and b/public/CGVLogo.png differ
diff --git a/public/auditoriums1.jpg b/public/auditoriums1.jpg
new file mode 100644
index 0000000..08581ed
Binary files /dev/null and b/public/auditoriums1.jpg differ
diff --git a/public/auditoriums2.jpg b/public/auditoriums2.jpg
new file mode 100644
index 0000000..283c29c
Binary files /dev/null and b/public/auditoriums2.jpg differ
diff --git a/public/auditoriums3.jpg b/public/auditoriums3.jpg
new file mode 100644
index 0000000..0e6a47c
Binary files /dev/null and b/public/auditoriums3.jpg differ
diff --git a/public/auditoriums4.jpg b/public/auditoriums4.jpg
new file mode 100644
index 0000000..a7fd7ba
Binary files /dev/null and b/public/auditoriums4.jpg differ
diff --git a/public/auditoriums5.jpg b/public/auditoriums5.jpg
new file mode 100644
index 0000000..75593d9
Binary files /dev/null and b/public/auditoriums5.jpg differ
diff --git a/public/auditoriums6.jpg b/public/auditoriums6.jpg
new file mode 100644
index 0000000..875cfd2
Binary files /dev/null and b/public/auditoriums6.jpg differ
diff --git a/public/auditoriums7.jpg b/public/auditoriums7.jpg
new file mode 100644
index 0000000..f14147b
Binary files /dev/null and b/public/auditoriums7.jpg differ
diff --git a/public/auditoriums8.jpg b/public/auditoriums8.jpg
new file mode 100644
index 0000000..cc68a91
Binary files /dev/null and b/public/auditoriums8.jpg differ
diff --git a/public/auditoriums9.png b/public/auditoriums9.png
new file mode 100644
index 0000000..13f26db
Binary files /dev/null and b/public/auditoriums9.png differ
diff --git a/public/descAud1.jpg b/public/descAud1.jpg
new file mode 100644
index 0000000..460a948
Binary files /dev/null and b/public/descAud1.jpg differ
diff --git a/public/descAud2.jpg b/public/descAud2.jpg
new file mode 100644
index 0000000..1af8f6f
Binary files /dev/null and b/public/descAud2.jpg differ
diff --git a/public/descAud3.jpg b/public/descAud3.jpg
new file mode 100644
index 0000000..0a2a41e
Binary files /dev/null and b/public/descAud3.jpg differ
diff --git a/public/descAud4.jpg b/public/descAud4.jpg
new file mode 100644
index 0000000..59c4b9c
Binary files /dev/null and b/public/descAud4.jpg differ
diff --git a/public/descAud5.jpg b/public/descAud5.jpg
new file mode 100644
index 0000000..8fb9420
Binary files /dev/null and b/public/descAud5.jpg differ
diff --git a/public/descAud6.jpg b/public/descAud6.jpg
new file mode 100644
index 0000000..4509238
Binary files /dev/null and b/public/descAud6.jpg differ
diff --git a/public/descAud7.jpg b/public/descAud7.jpg
new file mode 100644
index 0000000..50d48cb
Binary files /dev/null and b/public/descAud7.jpg differ
diff --git a/public/descAud8.jpg b/public/descAud8.jpg
new file mode 100644
index 0000000..226f761
Binary files /dev/null and b/public/descAud8.jpg differ
diff --git a/public/descAud9.jpg b/public/descAud9.jpg
new file mode 100644
index 0000000..e60080a
Binary files /dev/null and b/public/descAud9.jpg differ
diff --git a/public/descPromotion1.png b/public/descPromotion1.png
new file mode 100644
index 0000000..9bce058
Binary files /dev/null and b/public/descPromotion1.png differ
diff --git a/public/descPromotion2.jpg b/public/descPromotion2.jpg
new file mode 100644
index 0000000..6077a81
Binary files /dev/null and b/public/descPromotion2.jpg differ
diff --git a/public/descPromotion3.jpg b/public/descPromotion3.jpg
new file mode 100644
index 0000000..9e23b51
Binary files /dev/null and b/public/descPromotion3.jpg differ
diff --git a/public/descPromotion4.jpg b/public/descPromotion4.jpg
new file mode 100644
index 0000000..8ad5184
Binary files /dev/null and b/public/descPromotion4.jpg differ
diff --git a/public/descPromotion5.jpg b/public/descPromotion5.jpg
new file mode 100644
index 0000000..25c4745
Binary files /dev/null and b/public/descPromotion5.jpg differ
diff --git a/public/descSpo1.jpg b/public/descSpo1.jpg
new file mode 100644
index 0000000..74abc8e
Binary files /dev/null and b/public/descSpo1.jpg differ
diff --git a/public/descSpo2.jpg b/public/descSpo2.jpg
new file mode 100644
index 0000000..3ec3ed8
Binary files /dev/null and b/public/descSpo2.jpg differ
diff --git a/public/descSpo3.jpg b/public/descSpo3.jpg
new file mode 100644
index 0000000..9391091
Binary files /dev/null and b/public/descSpo3.jpg differ
diff --git a/public/membershipImage.png b/public/membershipImage.png
new file mode 100644
index 0000000..a8c2b2a
Binary files /dev/null and b/public/membershipImage.png differ
diff --git a/public/nowMovie1.jpg b/public/nowMovie1.jpg
new file mode 100644
index 0000000..9761ee4
Binary files /dev/null and b/public/nowMovie1.jpg differ
diff --git a/public/nowMovie10.jpg b/public/nowMovie10.jpg
new file mode 100644
index 0000000..d8c82bb
Binary files /dev/null and b/public/nowMovie10.jpg differ
diff --git a/public/nowMovie11.jpg b/public/nowMovie11.jpg
new file mode 100644
index 0000000..8b90c40
Binary files /dev/null and b/public/nowMovie11.jpg differ
diff --git a/public/nowMovie12.jpg b/public/nowMovie12.jpg
new file mode 100644
index 0000000..69f0af1
Binary files /dev/null and b/public/nowMovie12.jpg differ
diff --git a/public/nowMovie13.jpg b/public/nowMovie13.jpg
new file mode 100644
index 0000000..6d509af
Binary files /dev/null and b/public/nowMovie13.jpg differ
diff --git a/public/nowMovie14.jpg b/public/nowMovie14.jpg
new file mode 100644
index 0000000..acc47fa
Binary files /dev/null and b/public/nowMovie14.jpg differ
diff --git a/public/nowMovie15.jpg b/public/nowMovie15.jpg
new file mode 100644
index 0000000..07fe845
Binary files /dev/null and b/public/nowMovie15.jpg differ
diff --git a/public/nowMovie16.jpg b/public/nowMovie16.jpg
new file mode 100644
index 0000000..8e50f76
Binary files /dev/null and b/public/nowMovie16.jpg differ
diff --git a/public/nowMovie17.jpg b/public/nowMovie17.jpg
new file mode 100644
index 0000000..82a198b
Binary files /dev/null and b/public/nowMovie17.jpg differ
diff --git a/public/nowMovie18.jpg b/public/nowMovie18.jpg
new file mode 100644
index 0000000..830d998
Binary files /dev/null and b/public/nowMovie18.jpg differ
diff --git a/public/nowMovie19.jpg b/public/nowMovie19.jpg
new file mode 100644
index 0000000..93ef220
Binary files /dev/null and b/public/nowMovie19.jpg differ
diff --git a/public/nowMovie2.jpg b/public/nowMovie2.jpg
new file mode 100644
index 0000000..afae0f3
Binary files /dev/null and b/public/nowMovie2.jpg differ
diff --git a/public/nowMovie20.jpg b/public/nowMovie20.jpg
new file mode 100644
index 0000000..b08e972
Binary files /dev/null and b/public/nowMovie20.jpg differ
diff --git a/public/nowMovie3.jpg b/public/nowMovie3.jpg
new file mode 100644
index 0000000..c3965e4
Binary files /dev/null and b/public/nowMovie3.jpg differ
diff --git a/public/nowMovie4.jpg b/public/nowMovie4.jpg
new file mode 100644
index 0000000..8b8d927
Binary files /dev/null and b/public/nowMovie4.jpg differ
diff --git a/public/nowMovie5.jpg b/public/nowMovie5.jpg
new file mode 100644
index 0000000..906ba4f
Binary files /dev/null and b/public/nowMovie5.jpg differ
diff --git a/public/nowMovie6.jpg b/public/nowMovie6.jpg
new file mode 100644
index 0000000..ff8b2a7
Binary files /dev/null and b/public/nowMovie6.jpg differ
diff --git a/public/nowMovie7.jpg b/public/nowMovie7.jpg
new file mode 100644
index 0000000..d80c24f
Binary files /dev/null and b/public/nowMovie7.jpg differ
diff --git a/public/nowMovie8.jpg b/public/nowMovie8.jpg
new file mode 100644
index 0000000..31fc75e
Binary files /dev/null and b/public/nowMovie8.jpg differ
diff --git a/public/nowMovie9.jpg b/public/nowMovie9.jpg
new file mode 100644
index 0000000..e2feb61
Binary files /dev/null and b/public/nowMovie9.jpg differ
diff --git a/public/promotion1.jpg b/public/promotion1.jpg
new file mode 100644
index 0000000..d6847cf
Binary files /dev/null and b/public/promotion1.jpg differ
diff --git a/public/promotion2.jpg b/public/promotion2.jpg
new file mode 100644
index 0000000..0ba9eab
Binary files /dev/null and b/public/promotion2.jpg differ
diff --git a/public/promotion3.jpg b/public/promotion3.jpg
new file mode 100644
index 0000000..3807531
Binary files /dev/null and b/public/promotion3.jpg differ
diff --git a/public/promotion4.jpg b/public/promotion4.jpg
new file mode 100644
index 0000000..e156173
Binary files /dev/null and b/public/promotion4.jpg differ
diff --git a/public/promotion5.jpg b/public/promotion5.jpg
new file mode 100644
index 0000000..3352856
Binary files /dev/null and b/public/promotion5.jpg differ
diff --git a/public/soonMovie1.jpg b/public/soonMovie1.jpg
new file mode 100644
index 0000000..367319a
Binary files /dev/null and b/public/soonMovie1.jpg differ
diff --git a/public/soonMovie2.jpg b/public/soonMovie2.jpg
new file mode 100644
index 0000000..c3965e4
Binary files /dev/null and b/public/soonMovie2.jpg differ
diff --git a/public/soonMovie3.jpg b/public/soonMovie3.jpg
new file mode 100644
index 0000000..9068839
Binary files /dev/null and b/public/soonMovie3.jpg differ
diff --git a/public/soonMovie4.jpg b/public/soonMovie4.jpg
new file mode 100644
index 0000000..0c266f0
Binary files /dev/null and b/public/soonMovie4.jpg differ
diff --git a/public/soonMovie5.jpg b/public/soonMovie5.jpg
new file mode 100644
index 0000000..3ad4d5e
Binary files /dev/null and b/public/soonMovie5.jpg differ
diff --git a/public/soonMovie6.jpg b/public/soonMovie6.jpg
new file mode 100644
index 0000000..2aa60e4
Binary files /dev/null and b/public/soonMovie6.jpg differ
diff --git a/public/soonMovie7.jpg b/public/soonMovie7.jpg
new file mode 100644
index 0000000..c60bd2a
Binary files /dev/null and b/public/soonMovie7.jpg differ
diff --git a/public/soonMovie8.jpg b/public/soonMovie8.jpg
new file mode 100644
index 0000000..6b4d4b1
Binary files /dev/null and b/public/soonMovie8.jpg differ
diff --git a/public/sports1.jpg b/public/sports1.jpg
new file mode 100644
index 0000000..c1607e0
Binary files /dev/null and b/public/sports1.jpg differ
diff --git a/public/sports2.jpg b/public/sports2.jpg
new file mode 100644
index 0000000..bfd9d46
Binary files /dev/null and b/public/sports2.jpg differ
diff --git a/public/sports3.jpg b/public/sports3.jpg
new file mode 100644
index 0000000..52ac7f4
Binary files /dev/null and b/public/sports3.jpg differ
diff --git a/styles/globals.css b/styles/globals.css
index 00ffe68..89323b4 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -8,3 +8,46 @@
 #nprogress .bar {
     background: limegreen !important;
 }
+
+/* styles.css */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #fdfcf0;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh; /* Full viewport height */
+    text-align: center;
+}
+
+nav ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+nav ul li {
+    display: inline;
+    margin-right: 15px;
+}
+
+.movie-card {
+    border: 1px solid #ccc;
+    padding: 15px;
+    margin: 15px;
+    text-align: center;
+}
+
+.movie-card img {
+    max-width: 100%;
+    height: auto;
+}
+
+.movie-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 3e9e34e..0289aa3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -51,8 +51,8 @@
   },
   "include": [
     "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
+    "pages/**/*.ts",
+    "pages/**/*.tsx"
   ],
   "exclude": [
     "node_modules",
diff --git a/types/Movie.ts b/types/Movie.ts
new file mode 100644
index 0000000..3daefb7
--- /dev/null
+++ b/types/Movie.ts
@@ -0,0 +1,6 @@
+export interface Movie {
+    id: string;
+    title: string;
+    description: string;
+    posterUrl: string;
+}