diff --git a/css/style.css b/css/style.css
index 87d3f53..3836cbc 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,6 @@
+body{
+    font-family: 'Poppins', sans-serif;
+}
 .card{
     margin-bottom: 15px;
     transition: all 0.2s ease-in-out;
@@ -9,7 +12,7 @@
     transform: scale(1.03);
 }
 .card img{
-    width: 80%;
+    width: 65%;
     margin: 0 auto;
     margin-top: 5px;
 }
@@ -25,4 +28,12 @@
 .show-more{
     display: none;
     margin: 20px 0;
+}
+.details{
+    margin-top: 15px;
+}
+
+.features span{
+    font-weight: bold;
+    font-size: 20px;
 }
\ No newline at end of file
diff --git a/images/Firefox Installer.exe b/images/Firefox Installer.exe
deleted file mode 100644
index e757d10..0000000
Binary files a/images/Firefox Installer.exe and /dev/null differ
diff --git a/index.html b/index.html
index eb31f1c..bc6781b 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,10 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Mobile Hut</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <link rel="stylesheet" href="./css/style.css">
@@ -23,9 +26,19 @@
             </div>
         </nav>
         <!-- cards section -->
-        <div class="row my-3" id="cards">
-            
+        <div class="row">
+            <div class="col-12 col-md-8">
+                <div class="row my-3" id="cards">
+                
+                </div>
+            </div>
+            <!-- details section -->
+            <div class="col-md-4 details border border-dark rounded"  id="feature">
+                <h3 class="text-center m-3">Details</h3>
+
+            </div>
         </div>
+        
         <div class="row not-found" id="not-found">
             <div class="text-center">
                 <h2 class="text-center my-3">Sorry we don't find anything with your search😒</h2>
@@ -37,7 +50,7 @@ <h2 class="text-center my-3">Sorry we don't find anything with your search😒</
             <img src="./images/loading.gif" alt="">
         </div>
         <div class="row text-center show-more" id="show-more">
-            <div class="col-12"><button class="btn btn-primary" onclick="showRemainingData()">Show more</button></div>
+
         </div>
     </div>
 
diff --git a/js/script.js b/js/script.js
index 8442381..708a35b 100644
--- a/js/script.js
+++ b/js/script.js
@@ -34,26 +34,73 @@ const displayPhone = (data) => {
         for (let item of firstData) {
             const div = document.createElement('div');
             div.classList.add('col-12');
-            div.classList.add('col-md-3');
+            div.classList.add('col-md-4');
             div.classList.add('d-flex');
             div.classList.add('justify-content-center');
             div.classList.add('text-center');
             div.innerHTML = `
-                <div class="card g-2" style="width: 90%;">
+                <div class="card g-2" style="width: 95%;">
                     <img src="${item.image}" class="card-img-top" alt="${item.brand} mobile image">
                     <div class="card-body">
                         <h5 class="card-title">${item.brand}</h5>
                         <p class="card-text">${item.phone_name}</p>
-                        <button class="btn btn-primary">Specification</button>
+                        <button class="btn btn-primary" onclick="loadDetail('${item.slug}')">Specification</button>
                     </div>
                 </div>
     `
             cards.appendChild(div)
         }
-        
+        if (allData.length > 20) {
+            const showMore = document.getElementById('show-more');
+            showMore.style.display = 'block'
+            div = document.createElement('div');
+            div.classList.add('col-12');
+            div.innerHTML = `<button class="btn btn-primary" onclick="showRemainingData()">Show more</button>`;
+            showMore.appendChild(div);
+        }
         
         toggleNotFound('none');
         toggleLoading('none');
     }
     
+}
+
+const loadDetail = (id) => {
+    const url = `https://openapi.programming-hero.com/api/phone/${id}`
+    fetch(url)
+        .then(res => res.json())
+        .then(data => specDetails(data.data))
+}
+// phone spec detail section
+const specDetails = (data) => {
+    console.log(data.brand);
+    const featureSection = document.getElementById('feature');
+    const div = document.createElement('div');
+    featureSection.textContent = '';
+    div.classList.add('feature')
+    div.innerHTML = `
+    <h3 class="text-center m-3">Details</h3>
+        <div class="row">
+                        <div class="col-md-12 text-center"><img src="https://fdn2.gsmarena.com/vv/bigpic/apple-iphone-13-pro-max.jpg" alt=""></div>
+                        <div class="col-md-12 my-3">
+                            <h3>Brand name: ${data.brand}</h3>
+                            <h3>model: ${data.name}</h3>
+                        </div>
+                    </div>
+                    <!-- specification container -->
+                    <div class="row features">
+                        <div class="col col-md-12">
+                            <h2 class="text-center m-2">Features</h2>
+                            <p><span>Chipset: </span>chipset information</p>
+                            <p><span>Storsge: </span>Storage</p>
+                            <p><span>Display Size: </span>Display</p>
+                            <p><span>Memory: </span>memory</p>
+                            <p><span>Sensors: </span>sensors</p>
+                            <p><span>Others: </span>others</p>
+                            <p><span>Release Date: </span>release date</p>
+                        </div>
+                    </div>
+    `
+    featureSection.appendChild(div);
+
 }
\ No newline at end of file