diff --git a/css/details.css b/css/details.css
index 4af7b39..e9e6b14 100644
--- a/css/details.css
+++ b/css/details.css
@@ -115,6 +115,7 @@ main > nav {
 
 main > div {
     height: 42rem;
+    border-radius: 0 0 1.1rem 1.1rem;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
@@ -141,6 +142,7 @@ main > div aside {
     border-radius: 0 0 0 1.1rem;
     overflow-y: auto;
     overscroll-behavior-y: contain;
+    scrollbar-color: #ffffff #1d2345;
 }
 
 @media (max-width: 670px) {
@@ -178,9 +180,10 @@ main > div section {
 
 section div.loan-offer-details {
     padding: 2rem;
-    border-radius: 0 0 1.1rem 0;
     overflow-y: auto;
     overscroll-behavior-y: contain;
+    scrollbar-color: #36cf9b #1d2345;
+    border-radius: 0 0 1.1rem 0;
     display: flex;
     flex-direction: column;
     row-gap: 2rem;
@@ -219,6 +222,7 @@ div.loan-offer-details ul {
 div.loan-offer-details ul li span {
     font-weight: 500;
     font-size: 1.2rem;
+    text-transform: capitalize;
 }
 
 main > div section div.loan-offer-details input {
diff --git a/css/index.css b/css/index.css
index 47b9b7f..81c7b8c 100644
--- a/css/index.css
+++ b/css/index.css
@@ -334,7 +334,7 @@ div.cars-container {
     width: 100%;
     border-radius: 0 0 0 1.1rem;
     padding: 1rem;
-    font-weight: 500;
+    font-weight: 600;
 }
 .car-offer button.claim-btn span.claim-text:hover {
     width: 80%;
diff --git a/css/main.css b/css/main.css
index 4d7fa28..b329d56 100644
--- a/css/main.css
+++ b/css/main.css
@@ -308,6 +308,7 @@ footer div.footer-spacer {
 }
 .loan-offer-entry span.offer-car-info {
     font-weight: 600;
+    text-transform: capitalize;
 }
 .loan-offer-entry span.offer-loan-info {
     color: #333333;
diff --git a/details.html b/details.html
index dfc8317..8b563bf 100644
--- a/details.html
+++ b/details.html
@@ -36,7 +36,7 @@
 <body>
     <main class="card border-thin">
         <header>
-            <div class="region-dark go-back" onclick="window.history.go(-1);">
+            <div class="region-dark go-back" onclick="goBack();">
                 <img src="./assets/icons/arrow-back-min.svg" alt="Back">
                 <h3>Return to your search</h3>
             </div>
diff --git a/index.html b/index.html
index 5503cc2..9713d6b 100644
--- a/index.html
+++ b/index.html
@@ -79,7 +79,9 @@ <h3>Your loan offers</h3>
                 </header>
                 <ul class="loan-offers" id="loanOffersContainer">
                 </ul>
-                <a id="offersDetailsLink" class="round-empty-pill" href="./details.html">See all offer details</a>
+                <a id="offersDetailsLink" class="round-empty-pill" href="./details.html" style="visibility: hidden;">
+                    See all offer details
+                </a>
             </section>
         </aside>
         <section>
@@ -207,7 +209,7 @@ <h5>Total cost:</h5>
         </button>
     </script>
     <script type="text/html" id="tmpl_CarOfferBtnAvailable">
-        <button type="button" class="claim-btn rounded-bottom" name="{{id}}" onclick="claimOffer(this.name);">
+        <button type="button" class="claim-btn rounded-bottom" name="{{id}}" onclick="toggleClaimOffer(this.name);">
             <span class="btn-dark-blue claim-text">Claim this offer</span>
             <span class="btn-red bg-heart-empty claim-heart"></span>
         </button>
diff --git a/js/api.js b/js/api.js
index e793648..42539e8 100644
--- a/js/api.js
+++ b/js/api.js
@@ -85,5 +85,35 @@ var api = {
             console.log(response);
             throw "HTTP status: " + response.status;
         }
+    },
+
+    claimOffer: async function(userID, OfferID) {
+        // send the search query to the backend API
+        const response = await fetch(
+            this.API_URL + '/claimOffer?user_id=' + userID + '&offer_id=' + OfferID
+        );
+
+        if (response.status == 200) {
+            return;
+        }
+        else {
+            console.log(response);
+            throw "HTTP status: " + response.status;
+        }
+    },
+
+    unclaimOffer: async function(userID, OfferID) {
+        // send the search query to the backend API
+        const response = await fetch(
+            this.API_URL + '/unclaimOffer?user_id=' + userID + '&offer_id=' + OfferID
+        );
+
+        if (response.status == 200) {
+            return;
+        }
+        else {
+            console.log(response);
+            throw "HTTP status: " + response.status;
+        }
     }
 };
diff --git a/js/details.js b/js/details.js
index 32c746b..abdb0a2 100644
--- a/js/details.js
+++ b/js/details.js
@@ -22,47 +22,30 @@ 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);
+    const firstOfferID = await fetchClaimedOffers(userID);
 
     // find the selected offer for this user
     let offerSelected = fetchQueryParamByKey('offerSelected');
+    // select the first offer if none are specified
+    if (offerSelected === null || offerSelected === '') {
+        offerSelected = firstOfferID;
+        setPairInQuery('offerSelected', offerSelected);
+    }
     // show details for the specified offer
     await getOfferDetails(userID, offerSelected);
 }
 
 /*
-    Claimed offers list operations
-*/
-
-/*
-    Get the list of offers for a specific user
+    Function that takes the user back to the discovery page
 */
-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);
-    }
+function goBack() {
+    let userID = fetchQueryParamByKey('user_id');
+    window.location.href = '/?user_id=' + userID;
 }
 
 /*
-    Display the given list of claimed offers
+    Claimed offers list operations
 */
-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)
@@ -95,13 +78,12 @@ async function getOfferDetails(userID, offerID) {
         // display the offer details
         renderOfferDetails(
             details['brand'], details['model'], details['year'], details['kms'],
-            details['price'], details['loanAmount'], details['interestRate'], details['termMo'],
-            details['totalSum']
+            details['price'], details['loan_amount'], details['interest_rate'],
+            details['term_mo'], details['total_sum']
         )
     }
     catch (e) {
         console.log(e);
-        console.log(window.location.search);
     }
 }
 
diff --git a/js/discover.js b/js/discover.js
index c245d83..d4cc25d 100644
--- a/js/discover.js
+++ b/js/discover.js
@@ -30,9 +30,6 @@ async function onPageLoad() {
     if (sortAscURL === null) {
         setPairInQuery('sort_asc', 'true');
     }
-    else {
-        setPairInQuery('sort_asc', sortAscURL);
-    }
 
     // check for user ID on page load, and log in if present
     const userIDCurr = fetchQueryParamByKey('user_id');
@@ -44,13 +41,11 @@ async function onPageLoad() {
         submitSearch();
     }
     else {
-        userLogin();
+        // log in the user
+        await userLogin();
+        // fetch and display the user's claimed offers, if there is any
+        await updateClaimedOffers(fetchQueryParamByKey('user_id'));
     }
-
-    // DEMO
-    addOfferToContainer(
-        "u1639018896514634", "offer123", "Honda", "Civic", 2018, 250, 320, 3.2
-    );
 }
 
 
@@ -74,17 +69,28 @@ async function userLogin() {
         // call the API to log in the user
         const userParams = await api.login(userID);
 
-        // update their financial information
-        setPairInQuery('budget_mo', userParams["budget_mo"]);
-        setPairInQuery('downpayment', userParams["down_payment"]);
-        document.querySelector('input[name="budget_mo"]').value = userParams["budget_mo"];
-        document.querySelector('input[name="down_payment"]').value = userParams["down_payment"];
+        // update user budget if not given
+        let budgetMo = fetchQueryParamByKey('budget_mo');
+        if (budgetMo === null || budgetMo === '') {
+            budgetMo = userParams["budget_mo"];
+        }
+        setPairInQuery('budget_mo', budgetMo);
+        document.querySelector('input[name="budget_mo"]').value = budgetMo;
+
+        // update user down payment if not given
+        let downPayment = fetchQueryParamByKey('downpayment');
+        if (downPayment === null || downPayment === '') {
+            downPayment = userParams["down_payment"];
+        }
+        setPairInQuery('downpayment', downPayment);
+        document.querySelector('input[name="down_payment"]').value = downPayment;
     }
     catch (e) {
         console.log(e);
     }
 
-    displayLoggedInView();
+    // after loggin in, show the loan offers available to this user
+    await displayLoggedInView();
 }
 
 /*
@@ -98,7 +104,7 @@ async function displayLoggedInView() {
     financialParams.style.display = 'block';
 
     // add cars with loan offer info
-    submitSearch();
+    await submitSearch();
 
     // display the claimed offers widget
     const claimOffers = document.getElementById('claimedOffersWidget');
@@ -185,7 +191,7 @@ async function submitSearch() {
 
 
 /*
-    Cars and loan offers operations
+    Cars and loan offers (left side results) operations
 */
 
 /*
@@ -193,13 +199,26 @@ async function submitSearch() {
     on each item.
 */
 function displayCarsOrOffers(listings) {
+    // clear out the cars/offers container
     removeAllCarsOffers();
+
+    // add all car/loan offer listings to the container
     for (const item of listings) {
+        if ('mileage' in item) {
+            item['kms'] = item['mileage'];
+        }
         addCarToContainer(
             item['offer_id'], item['brand'], item['model'], item['year'], item['kms'],
-            item['price'], item['interest_rate'], item['term_mo'], item['total_sum']
+            item['price'], item['interest_rate'], item['payment_mo'], item['term_mo'],
+            item['total_sum']
         )
     }
+
+    // if there is an odd number of cars, add an invisible entry for visual pleasantness
+    if (listings.length % 2 !== 0) {
+        let carsContainer = document.getElementById('carsContainer');
+        carsContainer.innerHTML += '<div class="car-offer card border-thin" style="visibility: hidden;"></div>';
+    }
 }
 
 /*
@@ -211,7 +230,7 @@ function displayCarsOrOffers(listings) {
         - this option should be used before agreement/login
 */
 function addCarToContainer(
-    id, make, model, year, kms, price, apr, loan_term, total_sum
+    id, make, model, year, kms, price, apr, payment_mo, loan_term, total_sum
 ) {
     // get render target
     let carsContainer = document.getElementById('carsContainer');
@@ -235,7 +254,7 @@ function addCarToContainer(
     if ((apr !== '') && (apr !== null) && (apr !== undefined)) {
         const loanData = {
             apr: Math.round(apr * 100) / 100,
-            payment_mo: Math.round((total_sum / loan_term) * 100) / 100,
+            payment_mo: Math.round(payment_mo * 100) / 100,
             loan_term: loan_term,
             total_sum: total_sum
         };
@@ -276,12 +295,86 @@ function setCarsOffersLoading() {
     carsContainer.innerHTML = '<center style="font-size: 2rem;">Loading...</center>';
 }
 
+
+/*
+    Claimed loan offers operations
+*/
+
+/*
+    Update the list of claimed offers and associated display
+*/
+async function updateClaimedOffers(userID) {
+    const userOffer = await fetchClaimedOffers(userID);
+    const offersDetailsLink = document.getElementById('offersDetailsLink');
+    if (userOffer !== null) {
+        offersDetailsLink.style.visibility = 'visible';
+    }
+    else {
+        removeAllLoanOffers();
+        offersDetailsLink.style.visibility = 'hidden';
+    }
+}
+
 /*
-    Claim loan offers: TODO
+    Visually toggle the specified claim button between claimed and unclaimed
 */
+function toggleButtonClaimed(claimButton) {
+    for (let part of claimButton.children) {
+        // modify the text component
+        if (part.className.includes('claim-text')) {
+            // unclaimed state
+            if (part.className.includes('btn-dark-blue')) {
+                part.className = part.className.replace('btn-dark-blue', 'btn-red');
+                part.textContent = 'Offer claimed';
+            }
+            // claimed state
+            else {
+                part.className = part.className.replace('btn-red', 'btn-dark-blue');
+                part.textContent = 'Claim this offer';
+            }
+        }
+        // modify the heart component
+        if (part.className.includes('claim-heart')) {
+            // unclaimed state
+            if (part.className.includes('bg-heart-empty')) {
+                part.className = part.className.replace('bg-heart-empty', 'bg-heart-filled');
+                part.className = part.className.replace('btn-red', 'btn-dark-blue');
+            }
+            // claimed state
+            else {
+                part.className = part.className.replace('bg-heart-filled', 'bg-heart-empty');
+                part.className = part.className.replace('btn-dark-blue', 'btn-red');
+            }
+        }
+    }
+}
 
-async function claimOffer(id) {
-    console.log('Claiming ' + id);
+/*
+    Claim a given loan offer
+*/
+async function toggleClaimOffer(id) {
+    let claimButton = document.querySelector('button.claim-btn[name="' + id +'"]');
+    const userID = fetchQueryParamByKey('user_id');
+    // attempt to claim the specified offer at the backend API
+    try {
+        // offer is unclaimed, so claim it
+        if (claimButton.innerHTML.includes("Claim this offer")) {
+            await api.claimOffer(userID, id);
+        }
+        // offer is claimed, so unclaim it
+        else {
+            await api.unclaimOffer(userID, id);
+        }
+
+        // display the offer details
+        toggleButtonClaimed(claimButton);
+
+        // update the claimed offers widget, fetch and display the user's claimed offers
+        await updateClaimedOffers(userID);
+    }
+    catch (e) {
+        console.log(e);
+    }
 }
 
 
diff --git a/js/main.js b/js/main.js
index d3b2bf5..f7623fb 100644
--- a/js/main.js
+++ b/js/main.js
@@ -43,6 +43,45 @@ function setPairInQuery(key, value) {
     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);
+
+        // if no claimed offers, return null
+        if (userClaimedOffers.length === 0) {
+            return null;
+        }
+        else {
+            // populate the sidebar with user's claimed offers
+            displayClaimedOffers(userClaimedOffers, userID);
+
+            // return the first offer ID as selection default
+            return userClaimedOffers[0]['offerId'];
+        }
+    }
+    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['offer_id'], offer['brand'], offer['model'], offer['year'],
+            offer['interest_rate'], offer['term_mo'], offer['total_sum']
+        );
+    }
+}
+
 /*
     Add a loan offer to the loan offers container
 */
@@ -76,6 +115,6 @@ function addOfferToContainer(
     Remove all loan offers in the claimed offers container.
 */
 function removeAllLoanOffers() {
-    let carsContainer = document.getElementById('loanOffersContainer');
-    carsContainer.innerHTML = '';
+    let loanOffersContainer = document.getElementById('loanOffersContainer');
+    loanOffersContainer.innerHTML = '';
 }
