diff --git a/static/js/src/advantage/credentials/api/keys.js b/static/js/src/advantage/credentials/api/keys.js
index 1364c78a17e..4fe67291884 100644
--- a/static/js/src/advantage/credentials/api/keys.js
+++ b/static/js/src/advantage/credentials/api/keys.js
@@ -24,15 +24,3 @@ export async function rotateKey(activationKey) {
   const data = await response.json();
   return data;
 }
-
-export async function getExamProducts() {
-  let response = await fetch("/credentials/exam/products", {
-    method: "GET",
-    headers: {
-      Accept: "application/json",
-      "Content-Type": "application/json",
-    },
-  });
-  const data = await response.json();
-  return data;
-}
diff --git a/static/js/src/advantage/credentials/app.tsx b/static/js/src/advantage/credentials/app.tsx
index dabde0d9954..9eef87ed2ce 100644
--- a/static/js/src/advantage/credentials/app.tsx
+++ b/static/js/src/advantage/credentials/app.tsx
@@ -6,7 +6,6 @@ import { Integrations } from "@sentry/tracing";
 import { ReactQueryDevtools } from "react-query/devtools";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import CredManage from "./components/CredManage";
-import CredExamShop from "./components/CredExamShop/CredExamShop";
 
 const oneHour = 1000 * 60 * 60;
 const queryClient = new QueryClient({
@@ -37,7 +36,6 @@ function App() {
       <QueryClientProvider client={queryClient}>
         <Router basename="/credentials/shop">
           <Routes>
-            <Route path="/" element={<CredExamShop />} />
             <Route path="/manage" element={<CredManage />} />
           </Routes>
         </Router>
diff --git a/static/js/src/advantage/credentials/components/CredExamShop/CredExamShop.tsx b/static/js/src/advantage/credentials/components/CredExamShop/CredExamShop.tsx
deleted file mode 100644
index 9b7be466f41..00000000000
--- a/static/js/src/advantage/credentials/components/CredExamShop/CredExamShop.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  Button,
-  Col,
-  RadioInput,
-  Row,
-  Strip,
-  Spinner,
-} from "@canonical/react-components";
-import classNames from "classnames";
-import { currencyFormatter } from "advantage/react/utils";
-import { Product } from "advantage/credentials/utils/utils";
-import { useQuery } from "react-query";
-import { getExamProducts } from "advantage/credentials/api/keys";
-
-const CredExamShop = () => {
-  const ExamProductDescriptions: Product[] = [
-    {
-      id: "cue-linux-essentials",
-      name: "CUE.01 Linux",
-      displayName: "CUE.01 Linux",
-      metadata: [
-        {
-          key: "description",
-          value:
-            "Prove your basic operational knowledge of Linux by demonstrating your ability to secure, operate and maintain basic system resources. Topics include user and group management, file and filesystem navigation, and logs and installation tasks related to system maintenance.",
-        },
-        {
-          key: "originalPrice",
-          value: "10000",
-        },
-      ],
-    },
-    {
-      id: "cue-02-desktop",
-      name: "CUE.02 Desktop",
-      displayName: "CUE.02 Desktop",
-      metadata: [
-        {
-          key: "description",
-          value:
-            "Demonstrate your knowledge of Ubuntu Desktop administrative essentials. Topics include package management, system installation, data gathering, and managing printing and displays.",
-        },
-      ],
-    },
-    {
-      id: "cue-03-server",
-      name: "CUE.03 Server",
-      displayName: "CUE.03 Server",
-      metadata: [
-        {
-          key: "description",
-          value:
-            "Illustrate your knowledge of common Ubuntu Server administrative tasks and troubleshooting. Topics include job control, performance tuning, services management, and Bash scripting.",
-        },
-      ],
-    },
-  ];
-  const { isLoading, data: ExamData } = useQuery(["ExamProducts"], async () => {
-    return getExamProducts();
-  });
-  const [ExamProducts, setExamProducts] = useState<Product[]>([]);
-  const [exam, setExam] = useState(0);
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setExam(parseInt(event.target.value));
-    localStorage.setItem("exam-selector", JSON.stringify(event?.target.value));
-  };
-  const handleSubmit = (
-    event:
-      | React.FormEvent<HTMLFormElement>
-      | React.MouseEvent<HTMLButtonElement>
-  ) => {
-    event.preventDefault();
-    localStorage.setItem(
-      "shop-checkout-data",
-      JSON.stringify({
-        product: ExamProducts[exam],
-        quantity: 1,
-        action: "purchase",
-      })
-    );
-    location.href = "/account/checkout";
-  };
-  useEffect(() => {
-    if (ExamData === undefined) {
-      return;
-    }
-    for (const examDescription of ExamProductDescriptions) {
-      for (const exam of ExamData) {
-        if (exam.id === examDescription.id) {
-          Object.assign(examDescription, exam);
-        }
-      }
-    }
-    setExamProducts(ExamProductDescriptions);
-  }, [ExamData]);
-  if (isLoading) {
-    return <Spinner />;
-  }
-
-  return (
-    <>
-      <Strip className="product-selector">
-        <Row>
-          <h2>Select an exam to purchase</h2>
-        </Row>
-        <Row className="u-hide--small">
-          {ExamProducts.map((examElement, examIndex) => {
-            return (
-              <Col size={4} key={examIndex}>
-                <div
-                  className={classNames({
-                    "p-card--radio--column": true,
-                    "is-selected": exam == examIndex,
-                  })}
-                >
-                  <label className="p-radio">
-                    <input
-                      className="p-radio__input"
-                      autoComplete="off"
-                      type="radio"
-                      aria-labelledby={examElement.id + "-label"}
-                      value={examIndex}
-                      checked={exam == examIndex}
-                      onChange={handleChange}
-                      disabled={examElement.price === undefined}
-                    />
-                    <span className="p-radio__label">
-                      <RadioInput
-                        labelClassName="inner-label"
-                        label={examElement?.displayName}
-                        checked={exam == examIndex}
-                        value={examIndex}
-                        onChange={handleChange}
-                        disabled={examElement.price === undefined}
-                      />
-                      <hr />
-                      <p style={{ paddingLeft: "1rem", paddingRight: "1rem" }}>
-                        {examElement.metadata[0].value}
-                      </p>
-                      <hr />
-                      <h5
-                        className="u-align--right"
-                        style={{ paddingRight: "1rem" }}
-                      >
-                        {examElement.price === undefined ? (
-                          <span>Coming Soon</span>
-                        ) : (
-                          <span>
-                            Price:{" "}
-                            {examElement.metadata[1].value !== undefined ? (
-                              <s>
-                                {currencyFormatter.format(
-                                  parseInt(examElement.metadata[1].value) / 100
-                                )}
-                              </s>
-                            ) : (
-                              <></>
-                            )}{" "}
-                            {currencyFormatter.format(
-                              examElement.price.value / 100
-                            )}
-                          </span>
-                        )}
-                      </h5>
-                    </span>
-                  </label>
-                </div>
-              </Col>
-            );
-          })}
-        </Row>
-        {ExamProducts.map((examElement, examIndex) => {
-          return (
-            <Col className="u-hide u-show--small" size={12} key={examIndex}>
-              <div
-                className={classNames({
-                  "p-card--radio--column": true,
-                  "is-selected": exam == examIndex,
-                })}
-                onChange={handleChange}
-              >
-                <RadioInput
-                  inline
-                  label={examElement?.displayName}
-                  checked={exam == examIndex}
-                  value={examIndex}
-                  onChange={handleChange}
-                  disabled={examElement.price === undefined}
-                />
-                <span>
-                  <p style={{ paddingLeft: "1rem", paddingRight: "1rem" }}>
-                    {examElement.metadata[0].value}
-                  </p>
-                </span>
-                <span>
-                  <h5
-                    className="u-align--right"
-                    style={{ paddingRight: "1rem" }}
-                  >
-                    {examElement.price === undefined ? (
-                      <span>Coming Soon</span>
-                    ) : (
-                      <span>
-                        Price:{" "}
-                        {examElement.metadata[1].value !== undefined ? (
-                          <s>
-                            {currencyFormatter.format(
-                              parseInt(examElement.metadata[1].value) / 100
-                            )}
-                          </s>
-                        ) : (
-                          <></>
-                        )}{" "}
-                        {currencyFormatter.format(
-                          examElement.price.value / 100
-                        )}
-                      </span>
-                    )}
-                  </h5>
-                </span>
-              </div>
-            </Col>
-          );
-        })}
-      </Strip>
-      <section className="p-strip--light is-shallow p-shop-cart p-shop-cart--cue">
-        <Row className="u-sv3">
-          <Col size={6} className="p-text--small-caps">
-            Your Order
-          </Col>
-        </Row>
-        <Row>
-          <Col size={6} style={{ display: "flex" }}>
-            <p className="p-heading--2" style={{ marginBlock: "auto" }}>
-              {ExamProducts[exam]?.displayName}
-            </p>
-          </Col>
-          <Col size={3} small={2} style={{ display: "flex" }}>
-            <p className="p-heading--2" style={{ marginBlock: "auto" }}>
-              {currencyFormatter.format(
-                (ExamProducts[exam]?.price?.value ?? 0) / 100 ?? 0
-              )}
-            </p>
-          </Col>
-          <Col
-            size={3}
-            small={2}
-            style={{ display: "flex" }}
-            className="u-align--right"
-          >
-            <Button
-              appearance="positive"
-              onClick={handleSubmit}
-              style={{ marginBlock: "auto" }}
-            >
-              Buy Now
-            </Button>
-          </Col>
-        </Row>
-      </section>
-    </>
-  );
-};
-export default CredExamShop;
diff --git a/static/js/src/advantage/credentials/components/CredExamShop/index.tsx b/static/js/src/advantage/credentials/components/CredExamShop/index.tsx
deleted file mode 100644
index 5a773316687..00000000000
--- a/static/js/src/advantage/credentials/components/CredExamShop/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./CredExamShop";
diff --git a/templates/credentials/shop/index.html b/templates/credentials/shop/index.html
index 032b7e4e8b3..59b686eea00 100644
--- a/templates/credentials/shop/index.html
+++ b/templates/credentials/shop/index.html
@@ -3,27 +3,185 @@
 {% block title %}Canonical Certification{% endblock %}
 
 {% block meta_description %}
-    The Canonical Ubuntu Essentials exams certify knowledge and verify skills in general Linux,
-    Ubuntu Desktop, and Ubuntu Server topics.
+  The Canonical Ubuntu Essentials exams certify knowledge and verify skills in general Linux,
+  Ubuntu Desktop, and Ubuntu Server topics.
 {% endblock meta_description %}
 
 {% block content %}
-    <div id="react-root">
-        <div class="row u-align--center">
-            <section class="p-strip">
-                <div class="row u-align--center">
-                    <div class="col-12 u-no-margin--bottom p-card">
-                        <i class="p-icon--spinner u-animation--spin"></i> Loading&hellip;
-                    </div>
-                </div>
-            </section>
+  <form onsubmit="handleSubmit(); return false">
+    <div class="p-strip product-selector">
+      <div class="row">
+        <h2>Select an exam to purchase</h2>
+      </div>
+      <div class="row u-hide--small">
+        {% for exam in exams %}
+          {% set metadata_length = exam.metadata|length %}
+          {% set is_disabled = metadata_length == 1 %}
+          {% set is_discounted = True if metadata_length > 1 and exam.metadata[1].discountPrice else False %}
+          <div class="col-4">
+            <div id="price-card-{{ loop.index0 }}"
+                 class="p-card--radio--column {% if loop.index0 == exam_index %}is-selected{% endif %}">
+              <label class="p-radio">
+                <input id="price-radio"
+                       class="p-radio__input"
+                       type="radio"
+                       {% if is_disabled %}disabled{% endif %} />
+                <span class="p-radio__label">
+                  <label class="inner-label p-radio" label="{{ exam.name }}">
+                    <input id="price-radio-inner-{{ loop.index0 }}"
+                           class="p-radio__input"
+                           name="exam-radio"
+                           type="radio"
+                           value="{{ loop.index0 }}"
+                           {% if loop.index0 == exam_index %}checked{% endif %}
+                           {% if is_disabled %}disabled{% endif %} />
+                    <span class="p-radio__label">{{ exam.displayName }}</span>
+                  </label>
+                  <hr />
+                  <p style="padding-left: 1rem; padding-right: 1rem;">{{ exam.metadata[0].value }}</p>
+                  <hr />
+                  <h5 id="exam-price" class="u-align--right" style="padding-right: 1rem">
+                    {% if is_disabled %}
+                      Coming Soon!
+                    {% else %}
+                      <span class="exam-price" id="exam-price-{{ exam.id }}">Price:
+                        {% if is_discounted %}<s>{{ exam.metadata[1].currency }}{{ exam.metadata[1].originalPrice }}</s>{% endif %}
+                        {{ exam.metadata[1].currency }}
+                        {% if is_discounted %}
+                          {{ exam.metadata[1].discountPrice }}
+                        {% else %}
+                          {{ exam.metadata[1].originalPrice }}
+                        {% endif %}
+                      </span>
+                    {% endif %}
+                  </h5>
+                </span>
+              </label>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+
+      <!-- Smaller cards for minimised window -->
+      {% for exam in exams %}
+        {% set metadata_length = exam.metadata|length %}
+        {% set is_disabled = metadata_length == 1 %}
+        {% set is_discounted = True if metadata_length > 1 and exam.metadata[1].discountPrice else False %}
+        <div class="col-12 u-hide u-show--small">
+          <div id="price-card-{{ loop.index0 }}"
+               class="p-card--radio--column {% if loop.index0 == exam_index %}is-selected{% endif %}"
+               style="margin-left: 1rem;
+                      margin-right: 1rem">
+            <label class="p-radio--inline" label="{{ exam.name }}">
+              <input id="price-radio" {% if is_disabled %}disabled{% endif %} class="p-radio__input" type="radio" name="exam-radio--small" value={{ loop.index0 }} {% if loop.index0 == exam_index %}checked{% endif %} {% if is_disabled %}disabled{% endif %} />
+              <span class="p-radio__label">{{ exam.displayName }}</span>
+            </label>
+            <span>
+              <p style="padding-left: 1rem; padding-right: 1rem;">{{ exam.metadata[0].value }}</p>
+            </span>
+            <span>
+              <h5 id="exam-price" class="u-align--right" style="padding-right: 1rem">
+                {% if is_disabled %}
+                  Coming Soon!
+                {% else %}
+                  <span class="exam-price" id="exam-price-{{ exam.id }}">Price:
+                    {% if is_discounted %}<s>{{ exam.metadata[1].currency }}{{ exam.metadata[1].originalPrice }}</s>{% endif %}
+                    {{ exam.metadata[1].currency }}
+                    {% if is_discounted %}
+                      {{ exam.metadata[1].discountPrice }}
+                    {% else %}
+                      {{ exam.metadata[1].originalPrice }}
+                    {% endif %}
+                  </span>
+                {% endif %}
+              </h5>
+            </span>
+          </div>
         </div>
+      {% endfor %}
     </div>
 
-    <script src="{{ versioned_static('js/dist/credEnterprisePurchasing.js') }}"
-            type="module"
-            defer></script>
-    <script>
-      window.stripePublishableKey = "{{ get_stripe_publishable_key }}";
-    </script>
+    <section id="order-cart"
+             class="p-strip--light is-shallow p-shop-cart p-shop-cart--cue">
+      <div class="row u-sv3">
+        <div class="col-6 p-text--small-caps">Your Order</div>
+      </div>
+      <div class="row">
+        {% set exam = exams[exam_index] %}
+        {% set is_discounted = True if exam.metadata|length > 1 and exam.metadata[1].discountPrice else False %}
+        <div class="col-6" style="display: flex;">
+          <p id="selected-product-name"
+             class="order-name p-heading--2"
+             style="margin-block: auto">{{ exam.displayName }}</p>
+        </div>
+        <div class="col-3 col-small-2" style="display: flex;">
+          <p id="exam-price" class="p-heading--2" style="margin-block: auto;">
+            <span id="total-price" class="exam-price">
+              {% if is_discounted %}
+                {{ exam.metadata[1].currency }}{{ exam.metadata[1].discountPrice }}
+              {% else %}
+                {{ exam.metadata[1].currency }}{{ exam.metadata[1].originalPrice }}
+              {% endif %}
+            </span>
+          </p>
+        </div>
+        <div class="col-3 col-small-2 u-align--right" style="display: flex;">
+          <button type="submit" class="p-button--positive" style="margin-block: auto;">Buy Now</button>
+        </div>
+      </div>
+    </section>
+  </form>
+
+  <script>
+    window.stripePublishableKey = "{{ get_stripe_publishable_key }}";
+    const exams = JSON.parse('{{ exams | tojson }}');
+
+    const updateOrderTotal = (examIndex = 0) => {
+      if (examIndex > 0) {
+        return;
+      }
+      const exam = exams[examIndex];
+      if (exam.metadata.length === 0) return;
+      exams.forEach((e, eIndex) => {
+        const priceCard = document.getElementById(`price-card-${eIndex}`);
+        if (eIndex === examIndex) {
+          priceCard.classList.add('is-selected')
+        } else {
+          priceCard.classList.remove('is-selected')
+        }
+      })
+      const selectedProduct = document.getElementById('selected-product-name');
+      const totalPrice = document.getElementById('total-price');
+      selectedProduct.innerText = exam.displayName;
+      const price = exam.metadata[1];
+      totalPrice.innerText = `${price.currency}${price.discountPrice || price.originalPrice}`
+    }
+
+    document.getElementsByName("exam-radio").forEach(function(e) {
+      e.addEventListener("click", function() {
+        updateOrderTotal(parseInt(e.value));
+      });
+    });
+
+    document.getElementsByName("exam-radio--small").forEach(function(e) {
+      e.addEventListener("click", function() {
+        updateOrderTotal(parseInt(e.value));
+      });
+    });
+
+    const handleSubmit = () => {
+      event.preventDefault();
+      const index = document.querySelector('input[name="exam-radio"]:checked').value;
+
+      localStorage.setItem(
+        "shop-checkout-data",
+        JSON.stringify({
+          product: exams[index],
+          quantity: 1,
+          action: "purchase",
+        })
+      );
+      location.href = "/account/checkout";
+    };
+  </script>
 {% endblock %}
diff --git a/webapp/shop/cred/exams.json b/webapp/shop/cred/exams.json
new file mode 100644
index 00000000000..3350a2b5c69
--- /dev/null
+++ b/webapp/shop/cred/exams.json
@@ -0,0 +1,43 @@
+[
+  {
+    "id": "cue-linux-essentials",
+    "name": "CUE.01 Linux",
+    "displayName": "CUE.01 Linux",
+    "metadata": [
+      {
+        "key": "description",
+        "value":
+          "Prove your basic operational knowledge of Linux by demonstrating your ability to secure, operate and maintain basic system resources. Topics include user and group management, file and filesystem navigation, and logs and installation tasks related to system maintenance."
+      },
+      {
+        "originalPrice": "100.00",
+        "discountPrice": "0.00" ,
+        "currency": "$"
+      }
+    ]
+  },
+  {
+    "id": "cue-02-desktop",
+    "name": "CUE.02 Desktop",
+    "displayName": "CUE.02 Desktop",
+    "metadata": [
+      {
+        "key": "description",
+        "value":
+          "Demonstrate your knowledge of Ubuntu Desktop administrative essentials. Topics include package management, system installation, data gathering, and managing printing and displays."
+      }
+    ]
+  },
+  {
+    "id": "cue-03-server",
+    "name": "CUE.03 Server",
+    "displayName": "CUE.03 Server",
+    "metadata": [
+      {
+        "key": "description",
+        "value":
+          "Illustrate your knowledge of common Ubuntu Server administrative tasks and troubleshooting. Topics include job control, performance tuning, services management, and Bash scripting."
+      }
+    ]
+  }
+]
\ No newline at end of file
diff --git a/webapp/shop/cred/views.py b/webapp/shop/cred/views.py
index 952e33131a5..1abd820a9a1 100644
--- a/webapp/shop/cred/views.py
+++ b/webapp/shop/cred/views.py
@@ -856,7 +856,22 @@ def cred_submit_form(**_):
 @shop_decorator(area="cube", permission="user", response="html")
 @canonical_staff()
 def cred_shop(**kwargs):
-    return flask.render_template("credentials/shop/index.html")
+    exams_file = open("webapp/shop/cred/exams.json", "r")
+    exams = json.load(exams_file)
+    cue_products = get_cue_products(type="exam").json
+    for product in cue_products:
+        for exam in exams:
+            if product["id"] == exam["id"]:
+                exam["longId"] = product["longId"]
+                exam["period"] = product["period"]
+                exam["marketplace"] = product["marketplace"]
+                exam["name"] = product["name"]
+
+    return flask.render_template(
+        "credentials/shop/index.html",
+        exams=exams,
+        exam_index=0,
+    )
 
 
 @shop_decorator(area="cube", permission="user", response="html")