diff --git a/src/App.tsx b/src/App.tsx
index fe001eb..e0763c8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import "./App.css";
 import Home from "./views/Home";
 import Register from "./views/Register";
 import Login from "./views/Login";
+import FilmDetail from "./views/FilmDetail";
 import Planets from "./views/Planets";
 
 function App() {
@@ -12,6 +13,7 @@ function App() {
       <Route path="/" element={<Home />} />
       <Route path="/register" element={<Register />} />
       <Route path="/login" element={<Login />} />
+      <Route path="/filmdetail" element={<FilmDetail />} />
       <Route path="/planets" element={<Planets />} />
     </Routes>
   );
diff --git a/src/index.css b/src/index.css
index bd6213e..19bee02 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+body{
+    background-color: black;
+}
diff --git a/src/views/FilmDetail.tsx b/src/views/FilmDetail.tsx
new file mode 100644
index 0000000..16ce296
--- /dev/null
+++ b/src/views/FilmDetail.tsx
@@ -0,0 +1,35 @@
+function FilmDetail() {
+  return (
+    <div className="container mx-auto mt-5">
+      <div className="grid grid-cols-2 gap-4 h-1/2">
+        <div className="col-span-1">
+          <img
+            src="https://images.unsplash.com/photo-1432457990754-c8b5f21448de?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80"
+            className="w-full h-1/2 object-cover"
+            alt="cover"
+          />
+        </div>
+        <div
+          className="col-span-1 pl-4 pt-10 h-1/2 text-white"
+          style={{ backgroundColor: "#423E3E" }}>
+          <h2 className="font-bold" style={{fontSize:"30px"}}>Star Wars: The Phantom</h2>
+          <p className="text-lg mt-7">
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
+            quibusdam quos dicta minima est necessitatibus recusandae fugit
+            saepe odio autem assumenda voluptatum beatae molestias facere,
+            officiis laborum tenetur voluptatibus dolorum. Dolore, error sit
+            molestias sunt numquam temporibus commodi sapiente voluptas quos
+            voluptatibus repellendus dolores cumque nesciunt nihil, placeat,
+            perferendis quae nisi dolorem accusamus magnam deleniti. Repellendus
+            perspiciatis nobis molestiae perferendis blanditiis sed obcaecati,
+            inventore praesentium nesciunt odit fugiat delectus aliquam
+          </p>
+        </div>
+      </div>
+      <h3 className="text-2xl font-bold text-white" style={{marginTop:"-480px",marginLeft:"20px"}}>Databank: The Phantom</h3>
+      <hr className="w-100 h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"/>
+    </div>
+  );
+}
+
+export default FilmDetail;