diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66d0603ccc..3d545283b2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,8 @@ the release.
   ([#2614](https://github.com/open-telemetry/opentelemetry-demo/pull/2614))
 * [grafana] Update grafana version to 12.2.0
   ([#2615](https://github.com/open-telemetry/opentelemetry-demo/pull/2615))
+* [frontend] Fix navigation and cart math
+  ([#2660](https://github.com/open-telemetry/opentelemetry-demo/pull/2660))
 * [chore] Upgrade OpenFeature and add fix deprecation warnings for dependency
   injection
   ([#2644](https://github.com/open-telemetry/opentelemetry-demo/pull/2644))
diff --git a/src/frontend/components/CartDropdown/CartDropdown.styled.ts b/src/frontend/components/CartDropdown/CartDropdown.styled.ts
index 882021090b..d4318f16e0 100644
--- a/src/frontend/components/CartDropdown/CartDropdown.styled.ts
+++ b/src/frontend/components/CartDropdown/CartDropdown.styled.ts
@@ -12,10 +12,10 @@ export const CartDropdown = styled.div`
   width: 100%;
   height: 100%;
   max-height: 100%;
-  padding: 25px;
+  padding: 5px;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  align-items: center;
   gap: 24px;
   background: ${({ theme }) => theme.colors.white};
   z-index: 1000;
@@ -27,7 +27,7 @@ export const CartDropdown = styled.div`
     width: 400px;
     top: 95px;
     right: 17px;
-    max-height: 650px;
+    max-height: 600px;
   }
 `;
 
@@ -43,7 +43,7 @@ export const Title = styled.h5`
 export const ItemList = styled.div`
   ${({ theme }) => theme.breakpoints.desktop} {
     max-height: 450px;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 `;
 
@@ -60,6 +60,7 @@ export const ItemImage = styled(Image).attrs({
   height: '80',
 })`
   border-radius: 5px;
+  object-fit: contain;
 `;
 
 export const ItemName = styled.p`
@@ -80,10 +81,29 @@ export const ItemQuantity = styled(ItemName)`
 
 export const CartButton = styled(Button)``;
 
+export const ContentWrapper = styled.div`
+  width: 100%;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    overflow-y: visible;
+    flex: 0 1 auto;
+    min-height: auto;
+  }
+`;
+
 export const Header = styled.div`
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
+  width: 100%;
+
+  span {
+    position: absolute;
+    right: 25px;
+  }
 
   ${({ theme }) => theme.breakpoints.desktop} {
     span {
@@ -97,4 +117,5 @@ export const EmptyCart = styled.h3`
   margin-top: 25px;
   font-size: ${({ theme }) => theme.sizes.mLarge};
   color: ${({ theme }) => theme.colors.textLightGray};
+  text-align: center;
 `;
diff --git a/src/frontend/components/CartDropdown/CartDropdown.tsx b/src/frontend/components/CartDropdown/CartDropdown.tsx
index cd0703e19e..0e060e9f45 100644
--- a/src/frontend/components/CartDropdown/CartDropdown.tsx
+++ b/src/frontend/components/CartDropdown/CartDropdown.tsx
@@ -34,7 +34,7 @@ const CartDropdown = ({ productList, isOpen, onClose }: IProps) => {
 
   return isOpen ? (
     <S.CartDropdown ref={ref} data-cy={CypressFields.CartDropdown}>
-      <div>
+      <S.ContentWrapper>
         <S.Header>
           <S.Title>Shopping Cart</S.Title>
           <span onClick={onClose}>Close</span>
@@ -54,7 +54,7 @@ const CartDropdown = ({ productList, isOpen, onClose }: IProps) => {
             )
           )}
         </S.ItemList>
-      </div>
+      </S.ContentWrapper>
       <Link href="/cart">
         <S.CartButton data-cy={CypressFields.CartGoToShopping}>Go to Shopping Cart</S.CartButton>
       </Link>
diff --git a/src/frontend/components/CartItems/CartItems.styled.ts b/src/frontend/components/CartItems/CartItems.styled.ts
index a1a5fbcf18..884d675832 100644
--- a/src/frontend/components/CartItems/CartItems.styled.ts
+++ b/src/frontend/components/CartItems/CartItems.styled.ts
@@ -22,6 +22,7 @@ export const CartItemImage = styled.img`
   width: 100%;
   height: auto;
   border-radius: 5px;
+  object-fit: contain;
 
   ${({ theme }) => theme.breakpoints.desktop} {
     width: 120px;
diff --git a/src/frontend/components/CartItems/CartItems.tsx b/src/frontend/components/CartItems/CartItems.tsx
index 05e0279ec2..11350d392d 100644
--- a/src/frontend/components/CartItems/CartItems.tsx
+++ b/src/frontend/components/CartItems/CartItems.tsx
@@ -36,12 +36,12 @@ const CartItems = ({ productList, shouldShowPrice = true }: IProps) => {
 
   const total = useMemo<Money>(() => {
     const nanoSum =
-      productList.reduce((acc, { product: { priceUsd: { nanos = 0 } = {} } }) => acc + Number(nanos), 0) +
+      productList.reduce((acc, { product: { priceUsd: { nanos = 0 } = {} }, quantity }) => acc + Number(nanos) * quantity, 0) +
         shippingConst?.nanos || 0;
     const nanoExceed = Math.floor(nanoSum / 1000000000);
 
     const unitSum =
-      productList.reduce((acc, { product: { priceUsd: { units = 0 } = {} } }) => acc + Number(units), 0) +
+      productList.reduce((acc, { product: { priceUsd: { units = 0 } = {} }, quantity }) => acc + Number(units) * quantity, 0) +
         (shippingConst?.units || 0) + nanoExceed;
 
     return {
diff --git a/src/frontend/components/CheckoutItem/CheckoutItem.styled.ts b/src/frontend/components/CheckoutItem/CheckoutItem.styled.ts
index 013250ebad..1658215061 100644
--- a/src/frontend/components/CheckoutItem/CheckoutItem.styled.ts
+++ b/src/frontend/components/CheckoutItem/CheckoutItem.styled.ts
@@ -83,6 +83,7 @@ export const ItemImage = styled(Image).attrs({
   height: '80',
 })`
   border-radius: 5px;
+  object-fit: contain;
 `;
 
 export const SeeMore = styled.a`
diff --git a/src/frontend/components/Layout/Layout.tsx b/src/frontend/components/Layout/Layout.tsx
index f4e2da88a6..6a487e7621 100644
--- a/src/frontend/components/Layout/Layout.tsx
+++ b/src/frontend/components/Layout/Layout.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import Header from '../Header';
+import Footer from '../Footer';
 
 interface IProps {
   children: React.ReactNode;
@@ -12,6 +13,7 @@ const Layout = ({ children }: IProps) => {
     <>
       <Header />
       <main>{children}</main>
+      <Footer />
     </>
   );
 };
diff --git a/src/frontend/components/ProductCard/ProductCard.styled.ts b/src/frontend/components/ProductCard/ProductCard.styled.ts
index 50d2f7a586..a6f7018876 100644
--- a/src/frontend/components/ProductCard/ProductCard.styled.ts
+++ b/src/frontend/components/ProductCard/ProductCard.styled.ts
@@ -12,7 +12,7 @@ export const Image = styled.div<{ $src: string }>`
   width: 100%;
   height: 150px;
   background: url(${({ $src }) => $src}) no-repeat center;
-  background-size: 100% auto;
+  background-size: contain;
 
   ${({ theme }) => theme.breakpoints.desktop} {
     height: 300px;
diff --git a/src/frontend/components/Recommendations/Recommendations.tsx b/src/frontend/components/Recommendations/Recommendations.tsx
index 3a5d64fb2a..a5178ecfc1 100644
--- a/src/frontend/components/Recommendations/Recommendations.tsx
+++ b/src/frontend/components/Recommendations/Recommendations.tsx
@@ -9,6 +9,10 @@ import * as S from './Recommendations.styled';
 const Recommendations = () => {
   const { recommendedProductList } = useAd();
 
+  if (!recommendedProductList || recommendedProductList.length === 0) {
+    return null;
+  }
+
   return (
     <S.Recommendations data-cy={CypressFields.RecommendationList}>
       <S.TitleContainer>
diff --git a/src/frontend/pages/cart/checkout/[orderId]/index.tsx b/src/frontend/pages/cart/checkout/[orderId]/index.tsx
index 740b895307..63b7904f98 100644
--- a/src/frontend/pages/cart/checkout/[orderId]/index.tsx
+++ b/src/frontend/pages/cart/checkout/[orderId]/index.tsx
@@ -5,19 +5,39 @@ import { NextPage } from 'next';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import { useMemo } from 'react';
 import Ad from '../../../../components/Ad';
 import Button from '../../../../components/Button';
-import CheckoutItem from '../../../../components/CheckoutItem';
-import Footer from '../../../../components/Footer';
 import Layout from '../../../../components/Layout';
+import ProductPrice from '../../../../components/ProductPrice';
 import Recommendations from '../../../../components/Recommendations';
 import AdProvider from '../../../../providers/Ad.provider';
+import { Money } from '../../../../protos/demo';
 import * as S from '../../../../styles/Checkout.styled';
 import { IProductCheckout } from '../../../../types/Cart';
 
 const Checkout: NextPage = () => {
   const { query } = useRouter();
-  const { items = [], shippingAddress } = JSON.parse((query.order || '{}') as string) as IProductCheckout;
+  const { orderId, items = [], shippingAddress, shippingCost = { units: 0, currencyCode: 'USD', nanos: 0 } } = JSON.parse((query.order || '{}') as string) as IProductCheckout;
+
+  const orderTotal = useMemo<Money>(() => {
+    const itemsTotal = items.reduce((acc, { cost = { units: 0, nanos: 0, currencyCode: 'USD' } }) => {
+      return {
+        units: acc.units + (cost.units || 0),
+        nanos: acc.nanos + (cost.nanos || 0),
+        currencyCode: cost.currencyCode || 'USD',
+      };
+    }, { units: 0, nanos: 0, currencyCode: 'USD' });
+
+    const totalNanos = itemsTotal.nanos + (shippingCost.nanos || 0);
+    const nanoExceed = Math.floor(totalNanos / 1000000000);
+
+    return {
+      units: itemsTotal.units + (shippingCost.units || 0) + nanoExceed,
+      nanos: totalNanos % 1000000000,
+      currencyCode: shippingCost.currencyCode || 'USD',
+    };
+  }, [items, shippingCost]);
 
   return (
     <AdProvider
@@ -30,18 +50,64 @@ const Checkout: NextPage = () => {
       <Layout>
         <S.Checkout>
           <S.Container>
-            <S.Title>Your order is complete!</S.Title>
-            <S.Subtitle>We&apos;ve sent you a confirmation email.</S.Subtitle>
-
-            <S.ItemList>
-              {items.map(checkoutItem => (
-                <CheckoutItem
-                  key={checkoutItem.item.productId}
-                  checkoutItem={checkoutItem}
-                  address={shippingAddress}
-                />
-              ))}
-            </S.ItemList>
+            <S.LeftColumn>
+              <S.Title>Your order is complete!</S.Title>
+              <S.Subtitle>We&apos;ve sent you a confirmation email.</S.Subtitle>
+              <S.OrderInfo>
+                <S.InfoLabel>Order ID:</S.InfoLabel>
+                <S.InfoValue>{orderId}</S.InfoValue>
+              </S.OrderInfo>
+            </S.LeftColumn>
+
+            <S.RightColumn>
+              <S.SectionTitle>Shipping Address</S.SectionTitle>
+              <S.AddressText>{shippingAddress.streetAddress}</S.AddressText>
+              <S.AddressText>{shippingAddress.city}, {shippingAddress.state} {shippingAddress.zipCode}</S.AddressText>
+              <S.AddressText>{shippingAddress.country}</S.AddressText>
+            </S.RightColumn>
+
+            <S.ItemsSection>
+              <S.SectionTitle>Order Items</S.SectionTitle>
+              <S.ItemList>
+                {items.map(({ item, cost = { units: 0, currencyCode: 'USD', nanos: 0 } }) => {
+                  const itemTotal: Money = {
+                    units: (cost.units || 0) * item.quantity,
+                    nanos: (cost.nanos || 0) * item.quantity,
+                    currencyCode: cost.currencyCode || 'USD',
+                  };
+                  // Handle nanos overflow
+                  const nanoExceed = Math.floor(itemTotal.nanos / 1000000000);
+                  itemTotal.units += nanoExceed;
+                  itemTotal.nanos = itemTotal.nanos % 1000000000;
+
+                  return (
+                    <S.OrderItem key={item.productId}>
+                      <S.ItemImage src={"/images/products/" + item.product.picture} alt={item.product.name}/>
+                      <S.ItemDetails>
+                        <S.ItemName>{item.product.name}</S.ItemName>
+                        <S.ItemQuantity>Quantity: {item.quantity}</S.ItemQuantity>
+                      </S.ItemDetails>
+                      <S.ItemPrice>
+                        <ProductPrice price={itemTotal} />
+                      </S.ItemPrice>
+                    </S.OrderItem>
+                  );
+                })}
+              </S.ItemList>
+
+              <S.OrderSummary>
+                <S.SummaryRow>
+                  <span>Shipping:</span>
+                  <ProductPrice price={shippingCost} />
+                </S.SummaryRow>
+                <S.TotalRow>
+                  <S.TotalLabel>Total:</S.TotalLabel>
+                  <S.TotalAmount>
+                    <ProductPrice price={orderTotal} />
+                  </S.TotalAmount>
+                </S.TotalRow>
+              </S.OrderSummary>
+            </S.ItemsSection>
 
             <S.ButtonContainer>
               <Link href="/">
@@ -52,7 +118,6 @@ const Checkout: NextPage = () => {
           <Recommendations />
         </S.Checkout>
         <Ad />
-        <Footer />
       </Layout>
     </AdProvider>
   );
diff --git a/src/frontend/pages/cart/index.tsx b/src/frontend/pages/cart/index.tsx
index efb01c91ed..98992830f1 100644
--- a/src/frontend/pages/cart/index.tsx
+++ b/src/frontend/pages/cart/index.tsx
@@ -3,7 +3,6 @@
 
 import { NextPage } from 'next';
 import Head from 'next/head';
-import Footer from '../../components/Footer';
 import Layout from '../../components/Layout';
 import Recommendations from '../../components/Recommendations';
 import * as S from '../../styles/Cart.styled';
@@ -30,7 +29,6 @@ const Cart: NextPage = () => {
           {(!!items.length && <CartDetail />) || <EmptyCart />}
           <Recommendations />
         </S.Cart>
-        <Footer />
       </Layout>
     </AdProvider>
   );
diff --git a/src/frontend/pages/index.tsx b/src/frontend/pages/index.tsx
index 6ec2007855..e59626c476 100755
--- a/src/frontend/pages/index.tsx
+++ b/src/frontend/pages/index.tsx
@@ -3,7 +3,6 @@
 
 import { NextPage } from 'next';
 import Head from 'next/head';
-import Footer from '../components/Footer';
 import Layout from '../components/Layout';
 import ProductList from '../components/ProductList';
 import * as S from '../styles/Home.styled';
@@ -39,7 +38,6 @@ const Home: NextPage = () => {
             </S.Content>
           </S.Row>
         </S.Container>
-        <Footer />
       </S.Home>
     </Layout>
   );
diff --git a/src/frontend/pages/product/[productId]/index.tsx b/src/frontend/pages/product/[productId]/index.tsx
index 15766c8cb9..1c60bafcb5 100644
--- a/src/frontend/pages/product/[productId]/index.tsx
+++ b/src/frontend/pages/product/[productId]/index.tsx
@@ -8,7 +8,6 @@ import { useRouter } from 'next/router';
 import { useCallback, useState, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import Ad from '../../../components/Ad';
-import Footer from '../../../components/Footer';
 import Layout from '../../../components/Layout';
 import ProductPrice from '../../../components/ProductPrice';
 import Recommendations from '../../../components/Recommendations';
@@ -98,7 +97,6 @@ const ProductDetail: NextPage = () => {
           <Recommendations />
         </S.ProductDetail>
         <Ad />
-        <Footer />
       </Layout>
     </AdProvider>
   );
diff --git a/src/frontend/styles/Checkout.styled.ts b/src/frontend/styles/Checkout.styled.ts
index 69e340f80d..629ce1b3c4 100644
--- a/src/frontend/styles/Checkout.styled.ts
+++ b/src/frontend/styles/Checkout.styled.ts
@@ -15,47 +15,70 @@ export const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 28px;
-  align-items: center;
-  justify-content: center;
   margin-bottom: 120px;
 
   ${({ theme }) => theme.breakpoints.desktop} {
     display: grid;
-    grid-template-columns: auto;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      "left right"
+      "items items"
+      "button button";
+    gap: 40px;
   }
 `;
 
-export const DataRow = styled.div`
-  display: grid;
-  width: 100%;
-  justify-content: space-between;
-  grid-template-columns: 1fr 1fr;
-  padding: 24px 0;
-  border-top: solid 1px rgba(154, 160, 166, 0.5);
+export const LeftColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 
-  span:last-of-type {
+  ${({ theme }) => theme.breakpoints.desktop} {
+    grid-area: left;
+  }
+`;
+
+export const SectionTitle = styled.h4`
+  margin: 0 0 12px 0;
+  font-size: ${({ theme }) => theme.sizes.mLarge};
+  color: ${({ theme }) => theme.colors.textGray};
+  text-align: left;
+`;
+
+export const RightColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 20px;
+  background-color: ${({ theme }) => theme.colors.backgroundGray};
+  border-radius: 8px;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    grid-area: right;
+  }
+
+  ${SectionTitle} {
     text-align: right;
   }
 `;
 
-export const ItemList = styled.div`
-  width: 100%;
+export const ItemsSection = styled.div`
   display: flex;
   flex-direction: column;
   gap: 24px;
 
   ${({ theme }) => theme.breakpoints.desktop} {
-    margin: 72px 0;
+    grid-area: items;
   }
 `;
 
 export const Title = styled.h1`
   text-align: center;
   margin: 0;
-
   font-size: ${({ theme }) => theme.sizes.mLarge};
 
   ${({ theme }) => theme.breakpoints.desktop} {
+    text-align: left;
     font-size: ${({ theme }) => theme.sizes.dLarge};
   }
 `;
@@ -63,17 +86,151 @@ export const Title = styled.h1`
 export const Subtitle = styled.h3`
   text-align: center;
   margin: 0;
-
   font-size: ${({ theme }) => theme.sizes.mMedium};
   color: ${({ theme }) => theme.colors.textLightGray};
 
   ${({ theme }) => theme.breakpoints.desktop} {
+    text-align: left;
     font-size: ${({ theme }) => theme.sizes.dMedium};
   }
 `;
 
+export const OrderInfo = styled.div`
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  margin-top: 8px;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    justify-content: flex-start;
+  }
+`;
+
+export const InfoLabel = styled.span`
+  font-weight: ${({ theme }) => theme.fonts.bold};
+  color: ${({ theme }) => theme.colors.textGray};
+`;
+
+export const InfoValue = styled.span`
+  color: ${({ theme }) => theme.colors.textGray};
+`;
+
+export const AddressText = styled.p`
+  margin: 4px 0;
+  font-size: ${({ theme }) => theme.sizes.mMedium};
+  color: ${({ theme }) => theme.colors.textGray};
+  text-align: right;
+`;
+
+export const ItemList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+export const OrderItem = styled.div`
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding: 16px;
+  background-color: ${({ theme }) => theme.colors.white};
+  border: 1px solid ${({ theme }) => theme.colors.lightBorderGray};
+  border-radius: 8px;
+`;
+
+export const ItemImage = styled.img`
+  width: 80px;
+  height: 80px;
+  object-fit: contain;
+  border-radius: 5px;
+  flex-shrink: 0;
+`;
+
+export const ItemDetails = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+export const ItemName = styled.h5`
+  margin: 0;
+  font-size: ${({ theme }) => theme.sizes.mLarge};
+  font-weight: ${({ theme }) => theme.fonts.regular};
+`;
+
+export const ItemQuantity = styled.p`
+  margin: 0;
+  font-size: ${({ theme }) => theme.sizes.mMedium};
+  color: ${({ theme }) => theme.colors.textLightGray};
+`;
+
+export const ItemPrice = styled.div`
+  font-size: ${({ theme }) => theme.sizes.mLarge};
+  font-weight: ${({ theme }) => theme.fonts.bold};
+  color: ${({ theme }) => theme.colors.textGray};
+  text-align: right;
+  white-space: nowrap;
+`;
+
+export const OrderSummary = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px;
+  background-color: ${({ theme }) => theme.colors.backgroundGray};
+  border-radius: 8px;
+  margin-top: 16px;
+`;
+
+export const SummaryRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: ${({ theme }) => theme.sizes.mMedium};
+  color: ${({ theme }) => theme.colors.textGray};
+`;
+
+export const TotalRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 12px;
+  border-top: 2px solid ${({ theme }) => theme.colors.borderGray};
+  margin-top: 8px;
+`;
+
+export const TotalLabel = styled.span`
+  font-size: ${({ theme }) => theme.sizes.mLarge};
+  font-weight: ${({ theme }) => theme.fonts.bold};
+  color: ${({ theme }) => theme.colors.textGray};
+`;
+
+export const TotalAmount = styled.span`
+  font-size: ${({ theme }) => theme.sizes.mLarge};
+  font-weight: ${({ theme }) => theme.fonts.bold};
+  color: ${({ theme }) => theme.colors.textGray};
+`;
+
 export const ButtonContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    grid-area: button;
+  }
+`;
+
+export const DataRow = styled.div`
+  display: grid;
+  width: 100%;
+  justify-content: space-between;
+  grid-template-columns: 1fr 1fr;
+  padding: 10px 0;
+  border-top: solid 1px rgba(154, 160, 166, 0.5);
+
+  span:last-of-type {
+    text-align: right;
+  }
 `;
diff --git a/src/frontend/styles/ProductDetail.styled.ts b/src/frontend/styles/ProductDetail.styled.ts
index a2dda3839c..b919c45a1b 100644
--- a/src/frontend/styles/ProductDetail.styled.ts
+++ b/src/frontend/styles/ProductDetail.styled.ts
@@ -25,7 +25,7 @@ export const Image = styled.div<{ $src: string }>`
   height: 150px;
 
   background: url(${({ $src }) => $src}) no-repeat center;
-  background-size: 100% auto;
+  background-size: contain;
 
   ${({ theme }) => theme.breakpoints.desktop} {
     height: 500px;
diff --git a/src/frontend/styles/globals.css b/src/frontend/styles/globals.css
index b9557bc900..55ce6207f1 100755
--- a/src/frontend/styles/globals.css
+++ b/src/frontend/styles/globals.css
@@ -12,6 +12,10 @@
 /* See the License for the specific language governing permissions and */
 /* limitations under the License. */
 
+html, body {
+  height: 100%;
+}
+
 body {
   background: white;
   margin: 0px;
@@ -24,6 +28,16 @@ body * {
   font-weight: 600;
 }
 
+#__next {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+main {
+  flex: 1 0 auto;
+}
+
 select {
   -webkit-appearance: none;
   -webkit-border-radius: 0px;