diff --git a/css/details.css b/css/details.css
index 5cd5c7b..4af7b39 100644
--- a/css/details.css
+++ b/css/details.css
@@ -17,8 +17,7 @@ limitations under the License.
 main {
     width: 60rem;
     max-width: 90%;
-    max-height: 60rem;
-    margin: 2rem auto 5rem auto;
+    margin: 2rem auto 3rem auto;
 
     display: flex;
     flex-direction: column;
@@ -35,15 +34,18 @@ header {
     flex-direction: row;
     justify-content: flex-start;
     align-items: stretch;
+    align-content: stretch;
     flex-wrap: wrap;
     column-gap: 1em;
 }
 
 header div {
+    flex-grow: 1;
     padding: 2rem 1rem 1rem 1rem;
 }
 
 header div.go-back {
+    flex-grow: 1;
     padding-left: 2rem;
     padding-top: 1rem;
     min-width: 15rem;
@@ -56,6 +58,13 @@ header div.go-back {
     align-items: center;
     column-gap: 1rem;
 }
+@media (max-width: 600px) {
+    header div.go-back {
+        max-width: 100%;
+        width: 100%;
+        border-radius: 1.1rem 1.1rem 0 0;
+    }
+}
 
 header div.go-back img {
     transition: all 250ms ease;
@@ -69,6 +78,19 @@ header div.go-back:hover img {
     transform: translateX(-0.5rem);
 }
 
+header div.details-title {
+    padding-right: 2rem;
+}
+@media (max-width: 600px) {
+    header div.details-title {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
 header h1 {
     color: #36cf9b;
 }
@@ -84,34 +106,128 @@ header img {
 main > nav {
     flex-grow: 0;
     padding: 1rem 2rem;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
 }
 
 main > div {
+    height: 42rem;
     display: flex;
     flex-direction: row;
+    flex-wrap: nowrap;
     justify-content: space-between;
     align-items: stretch;
     overflow: hidden;
 }
 
+@media (max-width: 670px) {
+    main > div {
+        height: auto;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: stretch;
+    }
+}
+
+/* claimed loan offers sidebar styles */
+
 main > div aside {
-    flex-grow: 1;
-    max-width: 20rem;
-    max-height: 60rem;
+    height: 100%;
+    min-width: 18rem;
+    flex: 1 1 auto;
+    border-radius: 0 0 0 1.1rem;
     overflow-y: auto;
+    overscroll-behavior-y: contain;
+}
+
+@media (max-width: 670px) {
+    main > div aside {
+        max-height: 20rem;
+    }
+}
+
+.offer-selected, .offer-selected > * {
+    background-color: #1d2345 !important;
+    color: #ffffff;
+}
+.offer-selected .offer-loan-info {
+    color: #3ee3ac !important;
 }
 
+/* loan offer detail display styling */
+
 main > div section {
-    flex-grow: 2;
-    border-radius: 0 0 1.1rem 0;
-    padding: 1rem;
-    max-width: 75%;
+    flex: 10 5 auto;
     min-height: 30rem;
-    /* overflow-y: auto; */
+    border-radius: 0 0 1.1rem 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    row-gap: 2rem;
 }
 
-main > div section div {
-    word-wrap: anywhere;
-    max-height: 100%;
+@media (max-width: 670px) {
+    main > div section {
+        border-radius: 0 0 1.1rem 1.1rem;
+    }
+}
+
+section div.loan-offer-details {
+    padding: 2rem;
+    border-radius: 0 0 1.1rem 0;
     overflow-y: auto;
+    overscroll-behavior-y: contain;
+    display: flex;
+    flex-direction: column;
+    row-gap: 2rem;
+}
+
+section div.loan-offer-details h4 {
+    font-weight: 500;
+    color: #faa500;
+}
+
+div.loan-offer-details div.car-hero {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 15rem;
+}
+
+div.loan-offer-details div.car-hero img {
+    height: 100%;
+    width: auto;
+    border-radius: 1rem;
+}
+
+div.loan-offer-details ul {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    column-gap: 2rem;
+    row-gap: 1rem;
+}
+
+div.loan-offer-details ul li span {
+    font-weight: 500;
+    font-size: 1.2rem;
+}
+
+main > div section div.loan-offer-details input {
+    border-color: #ffffff;
+    margin: 0.5rem 0.5rem 0.5rem 0;
+}
+
+main > div section div.loan-offer-details button {
+    height: 2.4rem;
+    padding: 0.25em 1.5em;
+    border-radius: 1.2rem;
 }
diff --git a/css/index.css b/css/index.css
index e366aaf..47b9b7f 100644
--- a/css/index.css
+++ b/css/index.css
@@ -147,6 +147,7 @@ section.sec-claimed-offers header img {
 section.sec-claimed-offers ul.loan-offers {
     max-height: 18rem;
     overflow-y: auto;
+    overscroll-behavior-y: contain;
 }
 
 section.sec-claimed-offers a.round-empty-pill {
diff --git a/css/main.css b/css/main.css
index 779e8a1..4d7fa28 100644
--- a/css/main.css
+++ b/css/main.css
@@ -72,6 +72,8 @@ button {
     border: none;
     display: inline-flex;
     justify-content: center;
+    align-items: center;
+    transition: all 250ms ease;
 }
 
 button:hover {
diff --git a/details.html b/details.html
index 3dba2f9..dfc8317 100644
--- a/details.html
+++ b/details.html
@@ -29,8 +29,9 @@
     <link rel="stylesheet" href="css/details.css">
     <!-- Scripts -->
     <script type="text/javascript" src="js/mustache-4.2.0.min.js" defer></script>
-    <script type="text/javascript" src="js/main.js"></script>
+    <script type="text/javascript" src="js/main.js" defer></script>
     <script type="text/javascript" src="js/api.js" defer></script>
+    <script type="text/javascript" src="js/details.js" defer></script>
 </head>
 <body>
     <main class="card border-thin">
@@ -49,21 +50,10 @@ <h2>Your loan offer details</h2>
         </nav>
         <div>
             <aside>
-                <ul class="loan-offers">
-                    <li class="loan-offer-entry">
-                        <a href="./details.html?offerSelected={offer_id}">
-                            <img src="./assets/img/car-1.jpg" alt="">
-                            <div class="loan-offer-summary">
-                                <span class="offer-car-info">{{make}} {{model}} {{year}}</span>
-                                <span class="offer-loan-info">${{mon_pay}}/mo {{term}} years {{apr}}%</span>
-                            </div>
-                        </a>
-                    </li>
-
+                <ul class="loan-offers" id="loanOffersContainer">
                 </ul>
             </aside>
-            <section class="region-dark">
-                <div id="demo_field"></div>
+            <section class="region-dark" id="offerDetailsContainer">
             </section>
         </div>
     </main>
@@ -108,5 +98,73 @@ <h3>Powered by:</h3>
         </aside>
         <div class="footer-spacer"></div>
     </footer>
+
+    <!-- Mustache templates below; rendered in JavaScript -->
+    <script type="text/html" id="tmpl_LoanOffer">
+        <li class="loan-offer-entry" name="{{offer_id}}">
+            <a href="./details.html?user_id={{user_id}}&offerSelected={{offer_id}}">
+                <img src="./assets/img/car-1.jpg" alt="">
+                <div class="loan-offer-summary">
+                    <span class="offer-car-info">{{make}} {{model}} {{year}}</span>
+                    <span class="offer-loan-info">${{payment_mo}}/mo &middot; {{loan_term}} months &middot; {{apr}}%</span>
+                </div>
+            </a>
+        </li>
+    </script>
+
+    <script type="text/html" id="tmpl_LoanDetails">
+        <div class="loan-offer-details">
+            <div class="car-hero">
+                <img src="./assets/img/car-1.jpg" alt="Car Hero Image">
+            </div>
+            <ul class="car-info">
+                <li class="car-info-pair">
+                    <h4>Make:</h4>
+                    <span>{{make}}</span>
+                </li>
+                <li class="car-info-pair">
+                    <h4>Model:</h4>
+                    <span>{{model}}</span>
+                </li>
+                <li class="car-info-pair">
+                    <h4>Year:</h4>
+                    <span>{{year}}</span>
+                </li>
+                <li class="car-info-pair">
+                    <h4>Usage:</h4>
+                    <span>{{kms}} km</span>
+                </li>
+                <li class="car-info-pair">
+                    <h4>Retail price:</h4>
+                    <span>&#36;{{price}}</span>
+                </li>
+            </ul>
+            <form id="form-update-principal" onsubmit="submitNewPrincipal(); return false;">
+                <label for="loan-principal"><h4>Loan principal:</h4></label>
+                <input class="round-empty-pill" type="number" name="loan-principal" value="{{principal}}">
+                <button type="submit" name="updatePrincipal" class="btn-green">
+                    Update
+                </button>
+            </form>
+            <ul class="loan-info">
+                <li class="car-info-pair">
+                    <h4>Interest rate:</h4>
+                    <span>{{apr}}&#37;</span>
+                </li>
+                <li class="car-info-pair">
+                    <h4>You pay:</h4>
+                    <span>&#36;{{payment_mo}}/mo</span>
+                </li>
+                <li class="car-info-pair">
+                    <h4>Loan term:</h4>
+                    <span>{{loan_term}} months</span>
+                </li>
+                <li class="car-info-pair">
+                    <h4>Total cost:</h4>
+                    <span>&#36;{{total_sum}}</span>
+                </li>
+            </ul>
+        </div>
+    </script>
 </body>
 </html>
diff --git a/index.html b/index.html
index 574a4cd..5503cc2 100644
--- a/index.html
+++ b/index.html
@@ -77,18 +77,9 @@ <h3>You need to:</h3>
                     <img src="./assets/icons/heart-filled-red-min.svg" alt="">
                     <h3>Your loan offers</h3>
                 </header>
-                <ul class="loan-offers">
-                    <li class="loan-offer-entry">
-                        <a href="./details.html?offerSelected={offer_id}">
-                            <img src="./assets/img/car-1.jpg" alt="">
-                            <div class="loan-offer-summary">
-                                <span class="offer-car-info">{{make}} {{model}} {{year}}</span>
-                                <span class="offer-loan-info">${{mon_pay}}/mo {{term}} years {{apr}}%</span>
-                            </div>
-                        </a>
-                    </li>
+                <ul class="loan-offers" id="loanOffersContainer">
                 </ul>
-                <a class="round-empty-pill" href="./details.html">See all offer details</a>
+                <a id="offersDetailsLink" class="round-empty-pill" href="./details.html">See all offer details</a>
             </section>
         </aside>
         <section>
@@ -98,9 +89,9 @@ <h3>Your loan offers</h3>
                             <img id="sortIcon" src="assets/icons/sort-top-down-min.svg" alt="Sort by" />
                     </button>
                     <select name="sortBy" id="sortBy" onchange="setSortBy();">
-                        <option value="apr" selected>Interest rate</option>
+                        <option value="price" selected>Retail price</option>
+                        <option value="apr">Interest rate</option>
                         <option value="payment_mo">Monthly payment</option>
-                        <option value="price">Retail price</option>
                         <option value="total_sum">Total cost</option>
                         <option value="term_length">Loan term length</option>
                     </select>
@@ -203,7 +194,7 @@ <h5>You pay:</h5>
         </div>
         <div class="car-info-pair">
             <h5>Loan term:</h5>
-            <span class="green-text">{{loan_term}} years</span>
+            <span class="green-text">{{loan_term}} months</span>
         </div>
         <div class="car-info-pair">
             <h5>Total cost:</h5>
@@ -221,5 +212,16 @@ <h5>Total cost:</h5>
             <span class="btn-red bg-heart-empty claim-heart"></span>
         </button>
     </script>
+    <script type="text/html" id="tmpl_LoanOffer">
+        <li class="loan-offer-entry">
+            <a href="./details.html?user_id={{user_id}}&offerSelected={{offer_id}}">
+                <img src="./assets/img/car-1.jpg" alt="">
+                <div class="loan-offer-summary">
+                    <span class="offer-car-info">{{make}} {{model}} {{year}}</span>
+                    <span class="offer-loan-info">${{payment_mo}}/mo &middot; {{loan_term}} months &middot; {{apr}}%</span>
+                </div>
+            </a>
+        </li>
+    </script>
 </body>
 </html>
diff --git a/js/api.js b/js/api.js
index b832035..e793648 100644
--- a/js/api.js
+++ b/js/api.js
@@ -44,6 +44,40 @@ var api = {
         // retrieve the returned cars/offers
         const results = await response.json();
 
+        if (response.status == 200) {
+            return results;
+        }
+        else {
+            console.log(response);
+            throw "HTTP status: " + response.status;
+        }
+    },
+
+    getClaimedOffers: async function(userID) {
+        // send the search query to the backend API
+        const response = await fetch(this.API_URL + '/getClaimedOffers?user_id=' + userID);
+
+        // retrieve the returned cars/offers
+        const results = await response.json();
+
+        if (response.status == 200) {
+            return results;
+        }
+        else {
+            console.log(response);
+            throw "HTTP status: " + response.status;
+        }
+    },
+
+    getOfferDetails: async function(userID, OfferID) {
+        // send the search query to the backend API
+        const response = await fetch(
+            this.API_URL + '/getOfferDetails?user_id=' + userID + '&offer_id=' + OfferID
+        );
+
+        // retrieve the returned cars/offers
+        const results = await response.json();
+
         if (response.status == 200) {
             return results;
         }
diff --git a/js/details.js b/js/details.js
new file mode 100644
index 0000000..32c746b
--- /dev/null
+++ b/js/details.js
@@ -0,0 +1,152 @@
+/*
+Copyright (c) 2021 Ruofan Chen, Samm Du, Nada Eldin, Shalev Lifshitz
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at:
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+
+/*
+    Always called when the details page is loaded.
+*/
+async function onPageLoad() {
+    // fetch the user_id from the URL
+    let userID = fetchQueryParamByKey('user_id');
+    // fetch all claimed offers for this user
+    await fetchClaimedOffers(userID);
+
+    // find the selected offer for this user
+    let offerSelected = fetchQueryParamByKey('offerSelected');
+    // show details for the specified offer
+    await getOfferDetails(userID, offerSelected);
+}
+
+/*
+    Claimed offers list operations
+*/
+
+/*
+    Get the list of offers for a specific user
+*/
+async function fetchClaimedOffers(userID) {
+    try {
+        // call the API to get the user's claimed offers
+        const userClaimedOffers = await api.getClaimedOffers(userID);
+
+        // populate the sidebar with user's claimed offers
+        displayClaimedOffers(userClaimedOffers, userID);
+    }
+    catch (e) {
+        console.log(e);
+        console.log(window.location.search);
+    }
+}
+
+/*
+    Display the given list of claimed offers
+*/
+function displayClaimedOffers(offers, userID) {
+    removeAllLoanOffers();
+    for (const offer of offers) {
+        addOfferToContainer(
+            userID, offer['offerId'], offer['brand'], offer['model'], offer['year'],
+            offer['interestRate'], offer['termMo'], offer['totalSum']
+        );
+    }
+}
+
+/*
+    Highlight an offer (purely cosmetically)
+*/
+function highlightOffer(offerID) {
+    // give the offer a "selected" style
+    const offerEntry = document.querySelector('li[name="' + offerID +'"]');
+    offerEntry.className += " offer-selected";
+    // scroll the offer entry into view (if not already in-view)
+    offerEntry.scrollIntoView(false);
+}
+
+
+/*
+    Offer details operations
+*/
+
+/*
+    Fetch and display an offer's details based on the given offer ID
+*/
+async function getOfferDetails(userID, offerID) {
+    // attempt to fetch the specified offer's details from the backend API
+    try {
+        // make the API call
+        let details = await api.getOfferDetails(userID, offerID);
+
+        // highlight the chosen offer
+        highlightOffer(offerID);
+
+        // display the offer details
+        renderOfferDetails(
+            details['brand'], details['model'], details['year'], details['kms'],
+            details['price'], details['loanAmount'], details['interestRate'], details['termMo'],
+            details['totalSum']
+        )
+    }
+    catch (e) {
+        console.log(e);
+        console.log(window.location.search);
+    }
+}
+
+/*
+    Present a given offer's details
+*/
+function renderOfferDetails(
+    make, model, year, kms, price, principal, apr, loan_term, total_sum
+) {
+    // get render target
+    let offerDetailsContainer = document.getElementById('offerDetailsContainer');
+
+    // get mustache template
+    const tmpl_offerDetails = document.getElementById('tmpl_LoanDetails').innerHTML;
+
+    // render loan offer info
+    const offerDetailsData = {
+        make: make,
+        model: model,
+        year: year,
+        kms: Math.round(kms),
+        price: Math.round(price * 100) / 100,
+        principal: principal,
+        apr: Math.round(apr * 100) / 100,
+        payment_mo: Math.round((total_sum / loan_term) * 100) / 100,
+        loan_term: loan_term,
+        total_sum: total_sum
+    };
+    const offerDetailsRendered = Mustache.render(tmpl_offerDetails, offerDetailsData);
+
+    // append loan offer element to offers container
+    offerDetailsContainer.innerHTML = offerDetailsRendered;
+}
+
+/*
+    Update the loan principal given user input
+*/
+async function submitNewPrincipal() {
+    // retrieve new principal info
+    const formNewPrincipal = document.getElementById('form-update-principal');
+    const newPrincipal = (new FormData(formNewPrincipal)).get('loan-principal');
+
+    console.log("update principal: " + newPrincipal);
+}
+
+
+// always call this function on page load
+onPageLoad();
diff --git a/js/discover.js b/js/discover.js
index 3e5a1b2..c245d83 100644
--- a/js/discover.js
+++ b/js/discover.js
@@ -24,13 +24,7 @@ async function onPageLoad() {
 
     // configure their default search preferences if none provided in URL
     // configure default sort key
-    let sortByURL = fetchQueryParamByKey('sort_by');
-    if (sortByURL === null) {
-        setPairInQuery('sort_by', 'apr');
-    }
-    else {
-        setPairInQuery('sort_by', sortByURL);
-    }
+    setSortBy();
     // configure default sort order
     let sortAscURL = fetchQueryParamByKey('sort_asc');
     if (sortAscURL === null) {
@@ -52,6 +46,11 @@ async function onPageLoad() {
     else {
         userLogin();
     }
+
+    // DEMO
+    addOfferToContainer(
+        "u1639018896514634", "offer123", "Honda", "Civic", 2018, 250, 320, 3.2
+    );
 }
 
 
@@ -66,6 +65,10 @@ async function userLogin() {
         setPairInQuery('user_id', userID);
     }
 
+    // set the link of the offers details page with userID
+    const offersDetailsLink = document.getElementById('offersDetailsLink');
+    offersDetailsLink.href = './details.html?user_id=' + userID;
+
     // try to log in the user and fetch their financial information
     try {
         // call the API to log in the user
@@ -128,17 +131,15 @@ function toggleSortOrder() {
     const sortIcon = document.getElementById('sortIcon');
     if (fetchQueryParamByKey('sort_asc') == 'false') {
         // for ascending order, flip icon vertically
-        setPairInQuery('sort_asc', 'true');
         sortIcon.style.transform = 'scaleY(-1)';
         // configure the search params to set ascending search order to true
-        setPairInQuery('sort_asc', true);
+        setPairInQuery('sort_asc', 'true');
     }
     else {
         // for ascending order, do not flip icon
-        setPairInQuery('sort_asc', 'false');
         sortIcon.style.transform = 'none';
         // configure the search params to set ascending search order to false
-        setPairInQuery('sort_asc', false);
+        setPairInQuery('sort_asc', 'false');
     }
 }
 
@@ -195,8 +196,8 @@ function displayCarsOrOffers(listings) {
     removeAllCarsOffers();
     for (const item of listings) {
         addCarToContainer(
-            item['id'], item['brand'], item['model'], item['year'],
-            item['kms'], item['price'], item['apr']
+            item['offer_id'], item['brand'], item['model'], item['year'], item['kms'],
+            item['price'], item['interest_rate'], item['term_mo'], item['total_sum']
         )
     }
 }
@@ -210,7 +211,7 @@ function displayCarsOrOffers(listings) {
         - this option should be used before agreement/login
 */
 function addCarToContainer(
-    id, make, model, year, kms, price, apr, payment_mo, loan_term, total_sum
+    id, make, model, year, kms, price, apr, loan_term, total_sum
 ) {
     // get render target
     let carsContainer = document.getElementById('carsContainer');
@@ -233,8 +234,8 @@ function addCarToContainer(
     // if given loan data, render loan info with available button
     if ((apr !== '') && (apr !== null) && (apr !== undefined)) {
         const loanData = {
-            apr: apr,
-            payment_mo: payment_mo,
+            apr: Math.round(apr * 100) / 100,
+            payment_mo: Math.round((total_sum / loan_term) * 100) / 100,
             loan_term: loan_term,
             total_sum: total_sum
         };
diff --git a/js/main.js b/js/main.js
index 3e796fa..d3b2bf5 100644
--- a/js/main.js
+++ b/js/main.js
@@ -37,3 +37,45 @@ function setPairInQuery(key, value) {
     var new_params = '?' + url_params.toString();
     window.history.replaceState(null, null, new_params);
 }
+
+
+/*
+    Claimed offers list operations
+*/
+
+/*
+    Add a loan offer to the loan offers container
+*/
+function addOfferToContainer(
+    user_id, offer_id, make, model, year, apr, loan_term, total_sum
+) {
+    // get render target
+    let offersContainer = document.getElementById('loanOffersContainer');
+
+    // get mustache template
+    const tmpl_LoanOffer = document.getElementById('tmpl_LoanOffer').innerHTML;
+
+    // render loan offer info
+    const loanOfferData = {
+        user_id: user_id,
+        offer_id: offer_id,
+        make: make,
+        model: model,
+        year: year,
+        payment_mo: Math.round((total_sum / loan_term) * 100) / 100,
+        loan_term: loan_term,
+        apr: Math.round(apr * 100) / 100
+    };
+    const loanOfferRendered = Mustache.render(tmpl_LoanOffer, loanOfferData);
+
+    // append loan offer element to offers container
+    offersContainer.innerHTML += loanOfferRendered;
+}
+
+/*
+    Remove all loan offers in the claimed offers container.
+*/
+function removeAllLoanOffers() {
+    let carsContainer = document.getElementById('loanOffersContainer');
+    carsContainer.innerHTML = '';
+}