diff --git a/components/cart/CartFooter.tsx b/components/cart/CartFooter.tsx
index 7332ad0..615b411 100644
--- a/components/cart/CartFooter.tsx
+++ b/components/cart/CartFooter.tsx
@@ -1,5 +1,6 @@
 import React, { useContext } from "react";
 import { CartContext } from "pages/cart";
+import Link from "next/link";
 
 const CartFooter: React.FC = () => {
   const { cartState } = useContext(CartContext);
@@ -12,13 +13,12 @@ const CartFooter: React.FC = () => {
         </span>
       </div>
       <div className="mt-3">税と配送料は購入手続き時に計算されます</div>
-      <div className="max-w-xs mx-auto md:mr-0">
-        <a
-          href={cartState.value.webUrl}
-          className="bg-gray-700 flex-grow inline-block mt-12 px-4 py-3 text-sm text-white w-full md:w-auto"
-        >
-          ご購入手続きへ
-        </a>
+      <div className="mx-auto max-w-xs md:mr-0">
+        <Link href={cartState.value.webUrl} passHref>
+          <a className="flex-grow bg-gray-700 mt-12 text-sm text-white w-full py-3 px-4 inline-block md:w-auto">
+            ご購入手続きへ
+          </a>
+        </Link>
       </div>
     </div>
   );
diff --git a/components/cart/CartItemRow.tsx b/components/cart/CartItemRow.tsx
index 1862e1b..89c3e9c 100644
--- a/components/cart/CartItemRow.tsx
+++ b/components/cart/CartItemRow.tsx
@@ -3,6 +3,7 @@ import Image from "next/image";
 import { LineItem } from "shopify-buy";
 import { CartContext } from "pages/cart";
 import { QuantityInput } from "components/cart/QuantityInput";
+import Link from "next/link";
 
 type Props = {
   item: LineItem;
@@ -24,27 +25,37 @@ const CartItemRow: React.FC<Props> = ({ item }) => {
   };
 
   return (
-    <tr className="border-gray-200 border-b">
-      <td className="py-5 text-left w-4/6">
+    <tr className="border-b border-gray-200">
+      <td className="text-left py-5 w-4/6">
         <div className="flex">
-          <figure className="flex-grow-0 flex-shrink-0 pr-6 md:pr-12 w-20 md:w-36">
-            <a
+          <figure className="flex-grow-0 flex-shrink-0 pr-6 w-20 md:pr-12 md:w-36">
+            <Link
               href={`/products/${variant.product.handle}?variant=${variant.id}`}
+              passHref
             >
-              <Image priority src={imgSrc} height={150} width={150} />
-            </a>
+              <a>
+                <Image
+                  priority
+                  src={imgSrc}
+                  height={150}
+                  width={150}
+                  alt={title}
+                />
+              </a>
+            </Link>
           </figure>
           <div>
-            <div className="font-semibold text-gray-700 text-sm hover:underline">
-              <a
+            <div className="font-semibold text-sm text-gray-700 hover:underline">
+              <Link
                 href={`/products/${variant.product.handle}?variant=${variant.id}`}
+                passHref
               >
-                {title}
-              </a>
+                <a>{title}</a>
+              </Link>
             </div>
             <div className="mt-3">
               {item.variant.selectedOptions.map((opt, idx) => (
-                <div className="text-gray-700 text-sm" key={idx}>
+                <div className="text-sm text-gray-700" key={idx}>
                   <span>{opt.name}:</span>
                   <span>{opt.value}</span>
                 </div>
@@ -53,7 +64,7 @@ const CartItemRow: React.FC<Props> = ({ item }) => {
             <div className="mt-3">
               <button
                 onClick={() => onClickHandler(item.id as string)}
-                className="border-b border-gray-600 text-gray-700 text-sm"
+                className="border-b border-gray-600 text-sm text-gray-700"
               >
                 削除
               </button>
@@ -61,19 +72,19 @@ const CartItemRow: React.FC<Props> = ({ item }) => {
           </div>
         </div>
       </td>
-      <td className="align-top md:align-middle p-5 text-right text-gray-700 md:w-1/6 w-2/6">
+      <td className="text-right p-5 text-gray-700 w-2/6 align-top md:w-1/6 md:align-middle">
         <div className="text-sm">¥{price.toLocaleString("ja-JP")}</div>
-        <div className="md:hidden mt-3">
-          <label className="inline-block mt-auto mb-auto mr-2 my-auto text-xs">
+        <div className="mt-3 md:hidden">
+          <label className="my-auto mt-auto mb-auto mr-2 text-xs inline-block">
             数量
           </label>
           <QuantityInput id={item.id as string} quantity={quantity} />
         </div>
       </td>
-      <td className="md:table-cell hidden p-5 text-gray-700 text-right w-1/6">
+      <td className="text-right p-5 text-gray-700 w-1/6 hidden md:table-cell">
         <QuantityInput id={item.id as string} quantity={quantity} />
       </td>
-      <td className="md:table-cell hidden p-5 pr-0 text-gray-700 text-right w-1/6">
+      <td className="text-right p-5 pr-0 text-gray-700 w-1/6 hidden md:table-cell">
         ¥{subtotal.toLocaleString("ja-JP")}
       </td>
     </tr>
diff --git a/components/collections/ProductCard.tsx b/components/collections/ProductCard.tsx
index 99f68d4..85363cb 100644
--- a/components/collections/ProductCard.tsx
+++ b/components/collections/ProductCard.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Image from "next/image";
 import { Product } from "lib/graphql/collection/getCollectionWithProducts";
+import Link from "next/link";
 
 type Props = {
   product: Product;
@@ -14,20 +15,23 @@ const ProductCard: React.FC<Props> = ({ product }) => {
     <div className="product-card">
       <div className="product-card__inner">
         <figure className="product-card__image" style={{ margin: 0 }}>
-          <a href={`/products/${product.handle}`}>
-            <Image
-              priority
-              src={product.images[0]?.originalSrc}
-              height={400}
-              width={400}
-            />
-          </a>
+          <Link href={`/products/${product.handle}`} passHref>
+            <a>
+              <Image
+                priority
+                src={product.images[0]?.originalSrc}
+                height={400}
+                width={400}
+                alt={product.title}
+              />
+            </a>
+          </Link>
         </figure>
-        <div className="product-card__info mt-2" style={{ textAlign: "left" }}>
-          <div className="product-card__title font-semibold text-sm md:text-base">
+        <div className="mt-2 product-card__info" style={{ textAlign: "left" }}>
+          <div className="font-semibold text-sm product-card__title md:text-base">
             {product.title}
           </div>
-          <div className="product-card__price  font-semibold text-sm">
+          <div className="font-semibold  text-sm product-card__price">
             ¥{price.toLocaleString("ja-JP")}
             {priceVaries && "から"}
           </div>
diff --git a/components/collections/ProductList.tsx b/components/collections/ProductList.tsx
index d195457..dc19977 100644
--- a/components/collections/ProductList.tsx
+++ b/components/collections/ProductList.tsx
@@ -8,7 +8,7 @@ type Props = {
 };
 
 const ProductList: React.FC<Props> = ({ products }) => (
-  <div className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-9 py-9 md:py-14 md:py-12">
+  <div className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-9 py-9 md:py-14">
     {products.map((product, idx) => (
       <ProductCard product={product} key={idx} />
     ))}
diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx
index 211cc01..d2de97d 100644
--- a/components/common/Footer/Footer.tsx
+++ b/components/common/Footer/Footer.tsx
@@ -1,36 +1,36 @@
 import React from "react";
+import Link from "next/link";
 
 const Footer: React.FC = () => {
   const onClickHandler = () => {
     alert("Sorry, newsletter subscription feature is not implemented");
   };
   return (
-    <footer className="bg-gray-50 border-t border-gray-200 pt-12 pb-14">
-      <div className="footer__upper container md:grid md:grid-cols-2">
-        <div className="links mb-12 md:mb-0 px-4 md:px-0">
+    <footer className="border-t bg-gray-50 border-gray-200 pt-12 pb-14">
+      <div className="container footer__upper md:grid md:grid-cols-2">
+        <div className="mb-12 px-4 links md:mb-0 md:px-0">
           <div className="font-semibold">クイックリンク</div>
           <ul>
             <li className="py-4">
-              <a
-                href="/search"
-                className="hover:text-opacity-70 text-gray-800 hover:underline"
-              >
-                検索
-              </a>
+              <Link href="/search" passHref>
+                <a className="text-gray-800 hover:text-opacity-70 hover:underline">
+                  検索
+                </a>
+              </Link>
             </li>
           </ul>
         </div>
-        <div className="newsletter mb-12 md:mb-0 px-4 md:px-0">
+        <div className="mb-12 px-4 newsletter md:mb-0 md:px-0">
           <div className="font-semibold mb-4">ニュースレター</div>
           <div className="flex flex-wrap">
             <input
-              className="border border-gray-200 px-4 py-3 rounded-sm text-sm"
+              className="border rounded-sm border-gray-200 text-sm py-3 px-4"
               type="text"
               placeholder="メールアドレス"
               style={{ flex: "9999 0 15rem" }}
             />
             <button
-              className="bg-gray-700 flex-grow inline-block px-4 py-3 text-sm text-white"
+              className="flex-grow bg-gray-700 text-sm text-white py-3 px-4 inline-block"
               onClick={onClickHandler}
             >
               登録する
@@ -38,9 +38,9 @@ const Footer: React.FC = () => {
           </div>
         </div>
       </div>
-      <hr className="mt-14 md:mt-24 mb-7 md:mb-5" />
-      <div className="footer__bottom container md:text-right text-center">
-        <div className="inline-block text-xs text-gray-800 tracking-tight">
+      <hr className="mt-14 mb-7 md:mt-24 md:mb-5" />
+      <div className="container text-center footer__bottom md:text-right">
+        <div className="text-xs tracking-tight text-gray-800 inline-block">
           &copy; 2021, sample-kuma-store1 Powered by Shopify
         </div>
       </div>
diff --git a/components/common/Header/Header.tsx b/components/common/Header/Header.tsx
index 3027bb1..fc6b7dd 100644
--- a/components/common/Header/Header.tsx
+++ b/components/common/Header/Header.tsx
@@ -4,6 +4,7 @@ import MenuList from "components/common/Header/MenuList";
 import MenuButton from "components/common/Header/MenuButton";
 import { bagIcon } from "components/utils/Icon";
 import { Collapse } from "@material-ui/core";
+import Link from "next/link";
 
 const Header: React.FC = () => {
   const [opened, setOpened] = React.useState(false);
@@ -13,25 +14,23 @@ const Header: React.FC = () => {
   };
 
   return (
-    <header className="header border-b border-gray-200">
-      <div className="header__inner container items-center flex justify-between md:grid md:grid-cols-3 xl:max-w-none xl:px-14">
-        <div className="header__logo text-left mt-3 md:mt-6 mb-3 md:mb-6 ">
-          <a
-            href="/"
-            className="font-semibold leading-none text-lg md:text-xl text-gray-800 hover:text-opacity-70 tracking-widest"
-          >
-            SAMPLE-KUMA-STORE1
-          </a>
+    <header className="border-b border-gray-200 header">
+      <div className="container flex header__inner items-center justify-between md:grid md:grid-cols-3 xl:max-w-none xl:px-14">
+        <div className="mt-3 text-left mb-3 header__logo md:mt-6 md:mb-6 ">
+          <Link href="/" passHref>
+            <a className="font-semibold text-lg leading-none tracking-widest text-gray-800 md:text-xl hover:text-opacity-70">
+              SAMPLE-KUMA-STORE1
+            </a>
+          </Link>
         </div>
 
         <MenuList visibility="hidden md:block" />
 
-        <div className="header__icons flex items-center justify-end">
+        <div className="flex header__icons items-center justify-end">
           <SearchDrawer />
-
-          <a href="/cart" className="bag inline-block p-2 text-gray-700">
-            {bagIcon}
-          </a>
+          <Link href="/cart" passHref>
+            <a className="p-2 text-gray-700 bag inline-block">{bagIcon}</a>
+          </Link>
           <MenuButton opened={opened} toggleAccordion={toggleAccordion} />
         </div>
       </div>
diff --git a/components/common/Header/MenuList.tsx b/components/common/Header/MenuList.tsx
index 3b3ae37..42ca5e0 100644
--- a/components/common/Header/MenuList.tsx
+++ b/components/common/Header/MenuList.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Link from "next/link";
 
 type Props = {
   visibility: string;
@@ -8,27 +9,29 @@ const MenuList: React.FC<Props> = ({ visibility }) => {
   return (
     <nav className={`md:text-center ${visibility}`}>
       <ul>
-        <li className="border-t md:border-t-0 border-gray-200 md:inline-block">
-          <a
-            href="/"
-            className="block mx-auto px-8 md:px-4 py-4 text-gray-700 hover:text-opacity-70 hover:underline"
-            style={{ maxWidth: "640px" }}
-          >
-            All
-          </a>
+        <li className="border-t border-gray-200 md:border-t-0 md:inline-block">
+          <Link href="/" passHref>
+            <a
+              className="mx-auto py-4 px-8 text-gray-700 block md:px-4 hover:text-opacity-70 hover:underline"
+              style={{ maxWidth: "640px" }}
+            >
+              All
+            </a>
+          </Link>
         </li>
         {["apple", "watch"].map((title, idx) => (
           <li
-            className="border-t md:border-t-0 border-gray-20 md:inline-block"
+            className="border-t border-gray-20 md:border-t-0 md:inline-block"
             key={idx}
           >
-            <a
-              href={`/collections/${title}`}
-              className="block mx-auto px-8 md:px-4 py-4 text-gray-700 hover:text-opacity-70 hover:underline"
-              style={{ maxWidth: "640px" }}
-            >
-              {title[0].toUpperCase() + title.slice(1)}
-            </a>
+            <Link href={`/collections/${title}`} passHref>
+              <a
+                className="mx-auto py-4 px-8 text-gray-700 block md:px-4 hover:text-opacity-70 hover:underline"
+                style={{ maxWidth: "640px" }}
+              >
+                {title[0].toUpperCase() + title.slice(1)}
+              </a>
+            </Link>
           </li>
         ))}
       </ul>
diff --git a/components/product/CartDrawer.tsx b/components/product/CartDrawer.tsx
index 448df56..7a789fb 100644
--- a/components/product/CartDrawer.tsx
+++ b/components/product/CartDrawer.tsx
@@ -4,6 +4,7 @@ import { Drawer } from "@material-ui/core";
 import { ProductContext } from "pages/products/[handle]";
 import { closeIcon } from "components/utils/Icon";
 import { CartState } from "lib/useCart";
+import Link from "next/link";
 
 type Props = {
   isOpen: boolean;
@@ -33,8 +34,8 @@ const CartDrawer: React.FC<Props> = ({ isOpen, setIsOpen, cartState }) => {
       open={isOpen}
       onClose={closeDrawer}
     >
-      <div className="cart-drawer__container px-6 pb-6">
-        <div className="cart-drawer__header border-b border-gray-200 flex justify-between py-2">
+      <div className="px-6 pb-6 cart-drawer__container">
+        <div className="border-b flex border-gray-200 py-2 cart-drawer__header justify-between">
           <div className="text-sm text-gray-700">カートに追加済み</div>
           <div className="text-gray-700">
             <a className="cursor-pointer" onClick={closeDrawer}>
@@ -42,18 +43,23 @@ const CartDrawer: React.FC<Props> = ({ isOpen, setIsOpen, cartState }) => {
             </a>
           </div>
         </div>
-        <div className="cart-drawer__content flex mt-4">
+        <div className="flex mt-4 cart-drawer__content">
           <figure
-            className="cart-drawer__image mr-4"
+            className="mr-4 cart-drawer__image"
             style={{ flexBasis: "15%" }}
           >
-            <Image src={selectedImage.src} height={200} width={200}></Image>
+            <Image
+              src={selectedImage.src}
+              height={200}
+              width={200}
+              alt={"image-" + selectedImage.id.toString()}
+            ></Image>
           </figure>
-          <div className="cart-drawer__info flex-1">
-            <div className="cart-drawer__product-title font-bold">
+          <div className="flex-1 cart-drawer__info">
+            <div className="font-bold cart-drawer__product-title">
               {product.title}
             </div>
-            <div className="cart-drawer__option mt-2">
+            <div className="mt-2 cart-drawer__option">
               {(variant ? variant : product.variants[0]).selectedOptions.map(
                 (opt, idx) => (
                   <div className="text-sm" key={idx}>
@@ -65,23 +71,22 @@ const CartDrawer: React.FC<Props> = ({ isOpen, setIsOpen, cartState }) => {
             </div>
           </div>
           <div
-            className="cart-drawer__quantity ml-4 text-gray-600 text-right text-sm"
+            className="text-right text-sm ml-4 text-gray-600 cart-drawer__quantity"
             style={{ flexBasis: "20%" }}
           >
             数量: 1
           </div>
         </div>
-        <div className="cart-drawer__cart-link mt-4">
-          <a
-            className="border border-gray-900 font-semibold inline-block text-gray-700 rounded-sm px-4 py-3 text-center text-sm w-full"
-            href="/cart"
-          >
-            カートを見る（{String(totalQuqntity)}）
-          </a>
+        <div className="mt-4 cart-drawer__cart-link">
+          <Link href="/cart">
+            <a className="border rounded-sm font-semibold border-gray-900 text-center text-sm w-full py-3 px-4 text-gray-700 inline-block">
+              カートを見る（{String(totalQuqntity)}）
+            </a>
+          </Link>
         </div>
-        <div className="cart-drawer__continue mt-4 text-center">
+        <div className="mt-4 text-center cart-drawer__continue">
           <a
-            className="border-b border-gray-400 cursor-pointer text-gray-600 text-sm"
+            className="border-b cursor-pointer border-gray-400 text-sm text-gray-600"
             onClick={closeDrawer}
           >
             買い物を続ける
diff --git a/components/product/ProductImageList.tsx b/components/product/ProductImageList.tsx
index 8b62089..c6b5917 100644
--- a/components/product/ProductImageList.tsx
+++ b/components/product/ProductImageList.tsx
@@ -77,16 +77,16 @@ const ProductImageList: React.FC = () => {
           </div>
         </>
       ) : (
-        <div className="grid grid-cols-4 gap-1 mt-1">
+        <div className="mt-1 grid gap-1 grid-cols-4">
           {Array.from(new Array(4)).map((_, idx) => (
             <div
-              className="skelton-container h-0 overflow-hidden relative"
+              className="h-0 skelton-container overflow-hidden relative"
               style={{ paddingTop: "100%" }}
               key={idx}
             >
               <Skeleton
                 variant="rect"
-                className="absolute h-full left-0 top-0 w-full"
+                className="h-full w-full top-0 left-0 absolute"
               />
             </div>
           ))}
diff --git a/components/search/SearchItemRow.tsx b/components/search/SearchItemRow.tsx
index 891d05e..87ee60a 100644
--- a/components/search/SearchItemRow.tsx
+++ b/components/search/SearchItemRow.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Image from "next/image";
 import { Product } from "lib/graphql/product/getProductsByTitle";
+import Link from "next/link";
 
 type Props = {
   product: Product;
@@ -11,25 +12,25 @@ export const SearchItemRow: React.FC<Props> = ({ product }) => {
 
   return (
     <div>
-      <a
-        href={`/products/${product.handle}`}
-        className="flex font-semibold items-center justify-center mb-5 text-sm md:text-base text-gray-700"
-      >
-        <div className="flex items-center justify-center w-full">
-          <figure className="flex-grow-0 flex-shrink-0 mr-4 md:mr-6 w-16 md:w-24">
-            <Image
-              src={product.images[0].originalSrc}
-              height={150}
-              width={150}
-            />
-          </figure>
-          <div className="w-full">{product.title}</div>
-        </div>
-        <div className="ml-4 md:ml-6 w-1/5 whitespace-nowrap">
-          ¥{product.priceMin.toLocaleString("ja-JP")}
-          {priceVaries && "から"}
-        </div>
-      </a>
+      <Link href={`/products/${product.handle}`} passHref>
+        <a className="flex font-semibold text-sm mb-5 text-gray-700 items-center justify-center md:text-base">
+          <div className="flex w-full items-center justify-center">
+            <figure className="flex-grow-0 flex-shrink-0 mr-4 w-16 md:mr-6 md:w-24">
+              <Image
+                src={product.images[0].originalSrc}
+                height={150}
+                width={150}
+                alt={product.title}
+              />
+            </figure>
+            <div className="w-full">{product.title}</div>
+          </div>
+          <div className="ml-4 w-1/5 whitespace-nowrap md:ml-6">
+            ¥{product.priceMin.toLocaleString("ja-JP")}
+            {priceVaries && "から"}
+          </div>
+        </a>
+      </Link>
     </div>
   );
 };
diff --git a/package.json b/package.json
index 11fcfb5..fee7a7a 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "graphql-request": "^3.4.0",
     "lodash": "^4.17.21",
     "next": "^11.0.1",
+    "nprogress": "^0.2.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-infinite-scroll-component": "^6.1.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index cf84e9d..855f741 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,11 +1,29 @@
 import "styles/global.css";
-import 'tailwindcss/tailwind.css'
+import "tailwindcss/tailwind.css";
 // Import Swiper styles
 import "swiper/swiper.min.css";
 import "swiper/components/navigation/navigation.min.css";
 
+import nProgress from "nprogress";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  const router = useRouter();
+
+  useEffect(() => {
+    router.events.on("routeChangeStart", nProgress.start);
+    router.events.on("routeChangeComplete", nProgress.done);
+    router.events.on("routeChangeError", nProgress.done);
+
+    return () => {
+      router.events.off("routeChangeStart", nProgress.start);
+      router.events.off("routeChangeComplete", nProgress.done);
+      router.events.off("routeChangeError", nProgress.done);
+    };
+  }, [router]);
+
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/pages/cart.tsx b/pages/cart.tsx
index 8e70916..dc373c6 100644
--- a/pages/cart.tsx
+++ b/pages/cart.tsx
@@ -4,6 +4,7 @@ import useCart, { CartState, Checkout } from "lib/useCart";
 import Layout from "components/common/Layout";
 import CartItemTable from "components/cart/CartItemTable";
 import CartFooter from "components/cart/CartFooter";
+import Link from "next/link";
 
 type CartContext = {
   cartState: CartState;
@@ -23,7 +24,7 @@ const CartPage: React.FC = () => {
     <CartContext.Provider value={CartContextValue}>
       <Layout>
         <article className="collections-all">
-          <header className="mb-9 md:mb-14 text-center">
+          <header className="text-center mb-9 md:mb-14">
             <h1 className="font-semibold mb-2 text-gray-700 text-3xl md:text-4xl">
               ショッピングカート
             </h1>
@@ -38,12 +39,11 @@ const CartPage: React.FC = () => {
                 {cartState.value.lineItems.length > 0 ? (
                   <>
                     <div className="continue-link">
-                      <a
-                        href="/collections/all"
-                        className="border-b border-gray-600 text-gray-600"
-                      >
-                        買い物を続ける
-                      </a>
+                      <Link href="/collections/all" passHref>
+                        <a className="border-b border-gray-600 text-gray-600">
+                          買い物を続ける
+                        </a>
+                      </Link>
                     </div>
                     <CartItemTable />
                     <CartFooter />
@@ -52,12 +52,11 @@ const CartPage: React.FC = () => {
                   <>
                     <div className="mb-4">カート内に商品がありません</div>
                     <div className="continue-btn">
-                      <a
-                        className="bg-gray-700 flex-grow inline-block px-4 py-3 text-sm text-white"
-                        href="/collections/all"
-                      >
-                        買い物を続ける
-                      </a>
+                      <Link href="/collections/all" passHref >
+                        <a className="flex-grow bg-gray-700 text-sm text-white py-3 px-4 inline-block">
+                          買い物を続ける
+                        </a>
+                      </Link>
                     </div>
                   </>
                 )}
@@ -73,16 +72,16 @@ const CartPage: React.FC = () => {
 export default CartPage;
 
 const SleltonLoader = () => (
-  <div className="flex justify-center mb-5">
-    <div className="flex justify-center w-full items-start">
-      <div className="flex-grow-0 flex-shrink-0 mr-4 md:mr-6 w-16 md:w-24">
+  <div className="flex mb-5 justify-center">
+    <div className="flex w-full justify-center items-start">
+      <div className="flex-grow-0 flex-shrink-0 mr-4 w-16 md:mr-6 md:w-24">
         <div
           className="h-0 overflow-hidden relative"
           style={{ paddingTop: "100%" }}
         >
           <Skeleton
             variant="rect"
-            className="absolute h-full left-0 top-0 w-full"
+            className="h-full w-full top-0 left-0 absolute"
           />
         </div>
       </div>
@@ -92,14 +91,14 @@ const SleltonLoader = () => (
         <Skeleton variant="text" />
       </div>
     </div>
-    <div className="px-2 md:w-1/6 w-2/6">
+    <div className="px-2 w-2/6 md:w-1/6">
       <Skeleton variant="text" />
       <Skeleton variant="text" className="md:hidden" />
     </div>
-    <div className="hidden px-2 md:block w-1/6">
+    <div className="px-2 w-1/6 hidden md:block">
       <Skeleton variant="text" />
     </div>
-    <div className="hidden px-2 md:block w-1/6">
+    <div className="px-2 w-1/6 hidden md:block">
       <Skeleton variant="text" />
     </div>
   </div>
diff --git a/pages/collections/[handle].tsx b/pages/collections/[handle].tsx
index c58bbe1..d29479e 100644
--- a/pages/collections/[handle].tsx
+++ b/pages/collections/[handle].tsx
@@ -63,7 +63,7 @@ const CollectionPage: React.FC<Props> = ({ handle, sortBy }) => {
     <Layout>
       <article className="collection">
         <header>
-          <h1 className="font-semibold mb-9 md:mb-14 text-center text-gray-700 text-3xl md:text-4xl">
+          <h1 className="font-semibold text-center mb-9 text-gray-700 text-3xl md:mb-14 md:text-4xl">
             {collection && collection.title}
           </h1>
           <FilterToolbar sortBy={sortBy} />
@@ -92,16 +92,16 @@ const CollectionPage: React.FC<Props> = ({ handle, sortBy }) => {
 const SkeltonLoader: React.FC<{ numOfDisplays: number }> = ({
   numOfDisplays,
 }) => (
-  <div className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-9 py-9 md:py-14 md:py-12">
+  <div className="grid py-9 gap-x-6 gap-y-9 grid-cols-2 md:py-14 md:grid-cols-4">
     {Array.from(new Array(numOfDisplays)).map((_, idx) => (
       <div className="skelton" key={idx}>
         <div
-          className="skelton__image-container h-0 overflow-hidden relative"
+          className="h-0 skelton__image-container overflow-hidden relative"
           style={{ paddingTop: "100%" }}
         >
           <Skeleton
             variant="rect"
-            className="absolute h-full left-0 top-0 w-full"
+            className="h-full w-full top-0 left-0 absolute"
           />
         </div>
         <Skeleton variant="text" />
diff --git a/styles/global.css b/styles/global.css
index a393878..04242a1 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -11,3 +11,62 @@ body {
 main {
   flex: 1;
 }
+
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #1f2937;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #1f2937, 0 0 5px #1f2937;
+  opacity: 1;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index e25b70d..722e1d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2732,6 +2732,11 @@ normalize-range@^0.1.2:
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha1-y480xTIT2JVyP8urkH6UIq28r7E=
+
 object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"