diff --git a/public/assets/back-icon.svg b/public/assets/back-icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c04d81f154ae27c0d91fbe0c44f34d0e6644904f
--- /dev/null
+++ b/public/assets/back-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>
\ No newline at end of file
diff --git a/public/assets/placeholder-image.svg b/public/assets/placeholder-image.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cca8bb777ea49f08f660cd0bb53f9fba6a460298
--- /dev/null
+++ b/public/assets/placeholder-image.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 <?php echo $wh[0] ?> <?php echo $wh[1] ?>" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <title>placeholder</title>
+    <rect id="svg_1" height="<?php echo $wh[0] ?>" width="<?php echo $wh[1] ?>" y="0" x="0" fill="#<?php echo $fill ?>"/>
+      <text x="50%" y="50%" text-anchor="middle" alignment-baseline="middle" font-size="<?php echo $size ?>" dominant-baseline="middle" font-family="<?php echo $fontfamily ?>" fill="#<?php echo $color ?>"><?php echo $wh[0] ?>x<?php echo $wh[1] ?></text>
+    </g>
+  </svg>
\ No newline at end of file
diff --git a/public/css/give-review.css b/public/css/give-review.css
new file mode 100644
index 0000000000000000000000000000000000000000..0afc46ca13f63ff473ae910d3f37331a2d8c1b40
--- /dev/null
+++ b/public/css/give-review.css
@@ -0,0 +1,191 @@
+.background {
+  background-color: rgb(56, 55, 55); /* Ganti dengan URL latar belakang Anda */
+  background-size: cover;
+  filter: blur(5px); /* Ubah nilai blur sesuai keinginan Anda */
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.card {
+  background-color: #365563;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50%;
+  height: 80%;
+  gap: 2rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  color: gray;
+}
+
+.close-button:hover {
+  color: white;
+}
+
+.movie-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.back-btn {
+  background-color: #5b7c8f;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  border-radius: 8px;
+  cursor: pointer;
+  color: white;
+  font-weight: bold;
+}
+
+.back-btn:hover {
+  transform: translateY(1px);
+}
+
+.review {
+  display: flex;
+  flex-direction: column;
+}
+
+.input-review {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.select-movie {
+  gap: 1.5 rem;
+}
+
+.input-review label {
+  color: #d8e3e9;
+}
+
+.select-input {
+  background-color: #d8e3e9;
+  padding: 5 10;
+  appearance: none;
+  border: none;
+  margin: 0;
+  width: 100%;
+  z-index: 1;
+  outline: none;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.write-review {
+  background-color: #d8e3e9;
+  min-height: 15rem;
+  min-width: 20rem;
+  display: flex;
+  align-items: start;
+}
+
+.review label {
+  color: white;
+}
+
+.rating {
+  display: inline-block;
+  position: relative;
+  height: 50px;
+  line-height: 50px;
+  font-size: 50px;
+}
+
+.rating label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  cursor: pointer;
+}
+
+.rating label:last-child {
+  position: static;
+}
+
+.rating label:nth-child(1) {
+  z-index: 5;
+}
+
+.rating label:nth-child(2) {
+  z-index: 4;
+}
+
+.rating label:nth-child(3) {
+  z-index: 3;
+}
+
+.rating label:nth-child(4) {
+  z-index: 2;
+}
+
+.rating label:nth-child(5) {
+  z-index: 1;
+}
+
+.rating label input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+}
+
+.rating label .icon {
+  float: left;
+  color: transparent;
+}
+
+.rating label:last-child .icon {
+  color: #000;
+}
+
+.rating:not(:hover) label input:checked ~ .icon,
+.rating:hover label:hover input ~ .icon {
+  color: #09f;
+}
+
+.rating label input:focus:not(:checked) ~ .icon:last-child {
+  color: #000;
+  text-shadow: 0 0 5px #09f;
+}
+
+.save-button-conf {
+  display: flex;
+  width: 100%;
+  justify-content: end;
+  align-items: center;
+}
+
+.save-btn {
+  background-color: #00c06a;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  width: fit-content;
+  padding: 5 10;
+  font-weight: bold;
+  color: white;
+}
+
+.save-btn:hover {
+  transform: translateY(1px);
+}
diff --git a/public/css/navbar.css b/public/css/navbar.css
index 2387aea0ab8d310bf54081aaa209c6584540e402..447fe8ebbd12a82c7a595cca5cf622f1bb8c176a 100644
--- a/public/css/navbar.css
+++ b/public/css/navbar.css
@@ -17,10 +17,6 @@ li {
   color: #fff;
 }
 
-.nav-links {
-  color: white;
-}
-
 .navbar h1 {
   color: white;
   font-size: 32px;
@@ -38,10 +34,6 @@ li {
   font-size: 18px;
 }
 
-.menu li {
-  color: white;
-}
-
 .menu li:hover {
   text-shadow: 2px 2px 10px white;
   filter: dropshadow(color=#000000, offx=2, offy=2);
@@ -74,3 +66,9 @@ li {
   top: 50%;
   transform: translateY(-50%);
 }
+
+@media screen and (max-width: 800px) {
+  .menu li {
+    font-size: 10px;
+  }
+}
diff --git a/views/layouts/base.php b/views/layouts/base.php
index 3c98aee1fe0e8bc5ba8a52f530c17d56f2f5cf72..bb8ff64b36c11cff4dba85ad1727bd065d6a3bb4 100644
--- a/views/layouts/base.php
+++ b/views/layouts/base.php
@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel='stylesheet' href='/public/css/navbar.css'>
   <!-- <link rel="stylesheet" href="public/css/lib.css">
   <link rel="stylesheet" href="public/css/shared.css">
   <link rel="stylesheet" href="public/css/home.css"> -->
@@ -12,9 +13,28 @@
 </head>
 
 <body>
-  <nav>
-
-  </nav>
+    <nav class='navbar'>
+        <div class='logo' href='/'>
+            <img src='/public/assets/logo.svg' alt='logo' width="45" height="45" draggable='false'/>
+            <h1>Letterpaw</h1>
+        </div>
+        <ul class='nav-links'>
+            <div class='menu'>
+                <li><a href='/'>SIGN IN</a></li>
+                <li><a href='/'>CREATE ACCOUNT</a></li>
+                <li><a href='/'>FILMS</a></li>
+                <li><a href='/'>LISTS</a></li>
+                <li><a href='/'>MEMBERS</a></li>
+                <li><a href='/'>JOURNAL</a></li>
+            </div>
+        </ul>
+        <form method='get'>
+        <div class='input-search'>
+            <input class='' placeholder='Search...'/>
+            <img src='/public/assets/search-icon.svg' alt='search icon' />
+        </div>
+        </form>
+    </nav>
 
   <main>
     <h1>hai!!!</h1>
diff --git a/views/layouts/give-review.php b/views/layouts/give-review.php
new file mode 100644
index 0000000000000000000000000000000000000000..385534a5778fd03bd4cb18220592520f9257e0fc
--- /dev/null
+++ b/views/layouts/give-review.php
@@ -0,0 +1,76 @@
+<html>
+<head>
+    <link rel='stylesheet' href='/public/css/give-review.css'>
+</head>
+<body>
+    <div class="background">
+        
+    </div>
+    <div class='card'>
+        <button class='close-button' onclick="closeCard()">X</button>
+        <!-- Image of the movie -->
+        <div class='movie-info'>
+            <button class="back-btn">
+                <img src='/public/assets/back-icon.svg' width='30' height='30' />
+                 BACK
+            </button>
+            <img src='/public/assets/placeholder-image.svg' width='20rem' height='50rem'/>
+        </div>
+        <!-- Main Info -->
+        <div class='review'>
+            <form class='input-review'>
+                <div class='select-movie'>
+                    <label>I WATCHED...</label>
+                    <select class='select-input'>
+                        <option>--Please choose a movie--</option>
+                        <option>a</option>
+                        <option>a</option>
+                        <option>a</option>
+                        <option>a</option>
+                    </select>
+                </div>
+                <input type="text" class='write-review' placeholder='Add a review...'>
+            </form>
+            <label>Rating</label>
+            <form class="rating">
+                <label>
+                    <input type="radio" name="stars" value="1" />
+                    <span class="icon">★</span>
+                </label>
+                <label>
+                    <input type="radio" name="stars" value="2" />
+                    <span class="icon">★</span>
+                    <span class="icon">★</span>
+                </label>
+                <label>
+                    <input type="radio" name="stars" value="3" />
+                    <span class="icon">★</span>
+                    <span class="icon">★</span>
+                    <span class="icon">★</span>   
+                </label>
+                <label>
+                    <input type="radio" name="stars" value="4" />
+                    <span class="icon">★</span>
+                    <span class="icon">★</span>
+                    <span class="icon">★</span>
+                    <span class="icon">★</span>
+                </label>
+                <label>
+                    <input type="radio" name="stars" value="5" />
+                    <span class="icon">★</span>
+                    <span class="icon">★</span>
+                    <span class="icon">★</span>
+                    <span class="icon">★</span>
+                    <span class="icon">★</span>
+                </label>
+            </form>
+            <div class='save-button-conf'>
+            <button class='save-btn'>
+                SAVE
+            </button>
+            </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file