diff --git a/components/Cart.vue b/components/Cart.vue
index a53774b..6019349 100644
--- a/components/Cart.vue
+++ b/components/Cart.vue
@@ -1,48 +1,48 @@
 <template>
-  <section v-if="!$apollo.loading" class="fixed top-0 right-0 h-screen p-12 bg-white shadow-lg w-96">
-    <CloseCart />
-    <pre class="text-xs" v-if="cart">{{ cart }}</pre>
-    <pre class="text-xs" v-if="viewer">{{ viewer }}</pre>
-    <button @click="getUser">Get User</button>
-  </section>
+	<section v-if="!$apollo.loading" class="fixed top-0 right-0 h-screen p-12 bg-white shadow-lg w-96">
+		<CloseCart />
+		<pre class="text-xs" v-if="cart">{{ cart }}</pre>
+		<pre class="text-xs" v-if="viewer">{{ viewer }}</pre>
+		<button @click="getUser">Get User</button>
+	</section>
 </template>
 
 <script>
-import { gql } from "nuxt-graphql-request";
-import getCart from "~/gql/queries/getCart";
+import { gql } from 'nuxt-graphql-request'
+import getCart from '~/gql/queries/getCart'
 const requestHeaders = {
-  "Content-Type": "application/json",
-  Accept: "application/json",
-};
+	'Content-Type': 'application/json',
+	Accept: 'application/json'
+}
 
 export default {
-  data() {
-    return {
-      cart: null,
-      viewer: null,
-    };
-  },
-  async fetch() {
-    const cart = await this.$graphql.default.request(getCart);
-    this.cart = cart;
-  },
-  methods: {
-    async getUser() {
-      const query = gql`
-        query {
-          viewer {
-            email
-            firstName
-          }
-        }
-      `;
+	data() {
+		return {
+			cart: null,
+			viewer: null
+		}
+	},
+	async fetch() {
+		const cart = await this.$graphql.default.request(getCart)
+		this.cart = cart
+	},
+	methods: {
+		async getUser() {
+			const query = gql`
+				query {
+					viewer {
+						email
+						firstName
+					}
+				}
+			`
 
-      const data = await this.$graphql.default.rawRequest(query);
-      const cart = await this.$graphql.default.request(getCart);
-      this.cart = cart;
-      this.viewer = data.data.viewer;
-      console.log(data);
-    },
-  },
-};
+			const data = await this.$graphql.default.rawRequest(query)
+			const cart = await this.$graphql.default.request(getCart)
+			this.cart = cart
+			this.viewer = data.data.viewer
+			console.log(data)
+		}
+	}
+}
 </script>
diff --git a/layouts/default.vue b/layouts/default.vue
index ff56fd8..1aa9e70 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,66 +1,76 @@
 <template>
-  <div>
-    <div class="text-xs text-white bg-gray-600">
-      <div class="container flex justify-between py-1.5">
-        <div>NEXT DAY DELIVERY</div>
-        <nuxt-link to="/login" v-if="!this.$auth.loggedIn"> LOGIN / SIGN UP </nuxt-link>
-        <div @click="logOut" v-else>LOGOUT</div>
-      </div>
-    </div>
-    <Header />
-    <transition name="slide">
-      <Cart v-if="showCart" class="z-50" />
-    </transition>
-    <transition name="page" mode="out-in">
-      <Nuxt />
-    </transition>
-    <transition name="page">
-      <div v-if="showCart" class="fixed inset-0 bg-black opacity-25" @click="closeCart"></div>
-    </transition>
-    <Footer />
-  </div>
+	<div>
+		<div class="text-xs text-white bg-gray-600">
+			<div class="container flex justify-between py-1.5">
+				<div>NEXT DAY DELIVERY</div>
+				<nuxt-link to="/login" v-if="!this.$auth.loggedIn"> LOGIN / SIGN UP </nuxt-link>
+				<div @click="logOut" v-else>LOGOUT</div>
+			</div>
+		</div>
+		<Header />
+		<transition name="slide">
+			<Cart v-if="showCart" class="z-50" />
+		</transition>
+		<transition name="page" mode="out-in">
+			<Nuxt />
+		</transition>
+		<transition name="page">
+			<div v-if="showCart" class="fixed inset-0 bg-black opacity-25" @click="closeCart"></div>
+		</transition>
+		<Footer />
+	</div>
 </template>
 
 <script>
 export default {
-  computed: {
-    showCart() {
-      return this.$store.state.showCart;
-    },
-  },
-  methods: {
-    closeCart() {
-      this.$store.commit("toggleCart", false);
-    },
-    async logOut() {
-      const data = await this.$auth.logout();
-      console.log(data);
-    },
-  },
-};
+	computed: {
+		showCart() {
+			return this.$store.state.showCart
+		}
+	},
+	methods: {
+		closeCart() {
+			this.$store.commit('toggleCart', false)
+		},
+		async logOut() {
+			const data = await this.$auth.logout()
+		}
+	}
+}
 </script>
 
 <style lang="postcss">
 .page-enter-active,
 .page-leave-active {
-  transition: opacity 300ms ease-in-out;
+	transition: opacity 300ms ease-in-out;
 }
 .page-enter,
 .page-leave-active {
-  opacity: 0;
+	opacity: 0;
 }
 body {
-  @apply bg-gray-50;
+	@apply bg-gray-50;
 }
 
 /* Enter and leave animations can use different */
 /* durations and timing functions.              */
 .slide-leave-active,
 .slide-enter-active {
-  transition: transform 400ms ease-in-out;
+	transition: transform 400ms ease-in-out;
 }
 .slide-enter,
 .slide-leave-to {
-  transform: translateX(500px);
+	transform: translateX(500px);
+}
+
+.big-button {
+	@apply rounded inline-flex justify-center items-center text-sm leading-tight uppercase py-3 font-semibold;
+	box-shadow: 0 2px 0 #025e47, inset 0 0 8px rgb(255 210 0 / 10%), inset 0 1px 0 #37ff91, inset 0 -1px 0 #06c465;
+	background: linear-gradient(to bottom, #37ff91 0%, #06c465 100%) no-repeat 0, linear-gradient(to bottom, #37ff91 0%, #06c465 100%) no-repeat 100%,
+		#06994f linear-gradient(to bottom, #25ca85 0%, #057a40 100%) no-repeat;
+	background-size: 1px 100%, 1px 100%, cover;
+	color: #f9f5e1;
+	text-shadow: 0 -1px rgb(0 71 0 / 30%);
+	min-width: 200px;
 }
 </style>
diff --git a/netlify.toml b/netlify.toml
index 3276411..c149f3f 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -19,13 +19,12 @@
   [headers.values]
     Access-Control-Allow-Origin = "*"
     Access-Control-Allow-Headers = "Content-Type"
-    # X-Frame-Options = "ALLOW-FROM https://testing.2cubedtest.com"
-    # X-XSS-Protection = "1; mode=block"
-    # Referrer-Policy = "no-referrer"
-    # X-Content-Type-Options = "nosniff"
-    # Strict-Transport-Security = "max-age=15780000; includeSubDomains; preload"
-    # Feature-Policy = "geolocation 'none'; midi 'none'; sync-xhr 'none'; microphone 'none'; camera 'none'; magnetometer 'none'; gyroscope 'none'; speaker 'none'; fullscreen 'none'; payment 'none'"
-    # Content-Security-Policy = "default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline'"
+    X-XSS-Protection = "1; mode=block"
+    Referrer-Policy = "no-referrer"
+    X-Content-Type-Options = "nosniff"
+    Strict-Transport-Security = "max-age=15780000; includeSubDomains; preload"
+    Feature-Policy = "geolocation 'none'; midi 'none'; sync-xhr 'none'; microphone 'none'; camera 'none'; magnetometer 'none'; gyroscope 'none'; speaker 'none'; fullscreen 'none'; payment 'none'"
+    Content-Security-Policy = "default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline'"
 
 
 [[redirects]]
diff --git a/nuxt.config.js b/nuxt.config.js
index f43497c..01fa239 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -15,7 +15,7 @@ export default {
     link: [{ rel: "icon", type: "image/x-icon", href: "/icon.svg" }],
   },
 
-  modules: ["@nuxtjs/pwa", "@nuxtjs/axios", "@nuxtjs/auth-next"],
+  modules: ["@nuxtjs/pwa", "@nuxtjs/axios", "@nuxtjs/auth-next", '@nuxtjs/apollo'],
   buildModules: ["@nuxtjs/tailwindcss", "@nuxt/image", "nuxt-graphql-request"],
 
   graphql: {
@@ -30,6 +30,14 @@ export default {
     },
   },
 
+  apollo: {
+    clientConfigs: {
+      default:{
+        httpEndpoint: `${process.env.WORDPRESS_URL}/graphql`
+      }
+    }
+  },
+
   auth: {
     strategies: {
       google: {
diff --git a/package.json b/package.json
index 5300cb2..35ec380 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "dev:host": "nuxt --hostname '0' --port 8000",
     "build": "nuxt build",
     "start": "nuxt start",
-    "generate": "nuxt generate --modern",
+    "generate": "nuxt generate -m",
     "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
     "lint": "npm run lint:js"
   },
@@ -18,7 +18,7 @@
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/pwa": "^3.3.5",
     "@nuxtjs/tailwindcss": "^4.2.1",
-    "core-js": "^3.18.0",
+    "core-js": "^3.18.1",
     "graphql-tag": "^2.12.5",
     "nuxt": "^2.15.8"
   },
@@ -34,7 +34,7 @@
     "eslint-plugin-vue": "^7.18.0",
     "graphql": "^15.6.0",
     "nuxt-graphql-request": "^4.1.0",
-    "postcss": "^8.3.7",
+    "postcss": "^8.3.8",
     "prettier": "^2.4.1"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
index fedc18f..93191e0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,6 +6,7 @@
 				<h1 class="mb-4 text-6xl font-bold">Just landed.</h1>
 				<div class="max-w-sm mb-12 font-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde nam dignissimos nostrum veritatis nisi autem accusantium modi? Enim, voluptatibus consectetur.</div>
 				<nuxt-link class="inline-block p-4 px-6 leading-none text-black bg-white rounded shadow-sm" to="/products">Shop New Arrivals</nuxt-link>
+				<!-- <nuxt-link class="big-button" to="/products">Shop New Arrivals</nuxt-link> -->
 			</div>
 		</section>
 		<section class="container my-32">
diff --git a/pages/product/_slug.vue b/pages/product/_slug.vue
index 2903f5a..b4aa50e 100644
--- a/pages/product/_slug.vue
+++ b/pages/product/_slug.vue
@@ -1,231 +1,112 @@
 <template>
-  <main v-if="!$apollo.loading" class="container py-12 mx-auto">
-    <div class="flex flex-wrap mx-auto">
-      <nuxt-img
-        alt="ecommerce"
-        class="object-cover w-full h-64 rounded lg:w-1/2 lg:h-auto"
-        width="600"
-        height="600"
-        fit="cover"
-        :src="product.image.sourceUrl"
-      />
-      <div class="w-full mt-6 lg:w-1/2 lg:pl-10 lg:py-6 lg:mt-0">
-        <h2 class="text-sm tracking-widest text-gray-500 title-font">
-          BRAND NAME
-        </h2>
-        <h1 class="mb-1 text-3xl font-medium text-gray-900 title-font">
-          {{ product.name }}
-        </h1>
-        <div class="flex mb-4">
-          <span class="flex items-center">
-            <svg
-              fill="currentColor"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              class="w-4 h-4 text-green-500"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
-              />
-            </svg>
-            <svg
-              fill="currentColor"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              class="w-4 h-4 text-green-500"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
-              />
-            </svg>
-            <svg
-              fill="currentColor"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              class="w-4 h-4 text-green-500"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
-              />
-            </svg>
-            <svg
-              fill="currentColor"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              class="w-4 h-4 text-green-500"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
-              />
-            </svg>
-            <svg
-              fill="none"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              class="w-4 h-4 text-green-500"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
-              />
-            </svg>
-            <span class="ml-3 text-gray-600">4 Reviews</span>
-          </span>
-          <span
-            class="flex py-2 pl-3 ml-3 border-l-2 border-gray-200 space-x-2s"
-          >
-            <a class="text-gray-500">
-              <svg
-                fill="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                class="w-5 h-5"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"
-                />
-              </svg>
-            </a>
-            <a class="text-gray-500">
-              <svg
-                fill="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                class="w-5 h-5"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"
-                />
-              </svg>
-            </a>
-            <a class="text-gray-500">
-              <svg
-                fill="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                class="w-5 h-5"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"
-                />
-              </svg>
-            </a>
-          </span>
-        </div>
-        <p class="leading-relaxed">
-          Fam locavore kickstarter distillery. Mixtape chillwave tumeric
-          sriracha taximy chia microdosing tilde DIY. XOXO fam indxgo juiceramps
-          cornhole raw denim forage brooklyn. Everyday carry +1 seitan poutine
-          tumeric. Gastropub blue bottle austin listicle pour-over, neutra jean
-          shorts keytar banjo tattooed umami cardigan.
-        </p>
-        <div
-          class="flex items-center pb-5 mt-6 mb-5 border-b-2 border-gray-100"
-        >
-          <div class="flex">
-            <span class="mr-3">Color</span>
-            <button
-              class="w-6 h-6 border-2 border-gray-300 rounded-full  focus:outline-none"
-            />
-            <button
-              class="w-6 h-6 ml-1 bg-gray-700 border-2 border-gray-300 rounded-full  focus:outline-none"
-            />
-            <button
-              class="w-6 h-6 ml-1 bg-red-500 border-2 border-gray-300 rounded-full  focus:outline-none"
-            />
-          </div>
-          <div class="flex items-center ml-6">
-            <span class="mr-3">Size</span>
-            <div class="relative">
-              <select
-                class="py-2 pl-3 pr-10 text-base border border-gray-300 rounded appearance-none  focus:outline-none focus:ring-2 focus:ring-green-200 focus:border-green-500"
-              >
-                <option>SM</option>
-                <option>M</option>
-                <option>L</option>
-                <option>XL</option>
-              </select>
-              <span
-                class="absolute top-0 right-0 flex items-center justify-center w-10 h-full text-center text-gray-600 pointer-events-none "
-              >
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  class="w-4 h-4"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M6 9l6 6 6-6" />
-                </svg>
-              </span>
-            </div>
-          </div>
-        </div>
-        <div class="flex">
-          <span class="text-2xl font-medium text-gray-900 title-font">
-            {{ product.price }}
-          </span>
-          <button
-            class="flex px-6 py-2 ml-auto text-white bg-green-500 border-0 rounded  focus:outline-none hover:bg-green-600"
-          >
-            Button
-          </button>
-          <button
-            class="inline-flex items-center justify-center w-10 h-10 p-0 ml-4 text-gray-500 bg-gray-200 border-0 rounded-full "
-          >
-            <svg
-              fill="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              class="w-5 h-5"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </div>
-  </main>
+	<main v-if="!$apollo.loading" class="container py-12 mx-auto">
+		<div class="flex flex-wrap mx-auto">
+			<nuxt-img alt="ecommerce" class="object-cover w-full h-64 rounded lg:w-1/2 lg:h-auto" width="600" height="600" fit="cover" :src="product.image.sourceUrl" />
+			<div class="w-full mt-6 lg:w-1/2 lg:pl-10 lg:py-6 lg:mt-0">
+				<h2 class="text-sm tracking-widest text-gray-500 title-font">
+					BRAND NAME
+				</h2>
+				<h1 class="mb-1 text-3xl font-medium text-gray-900 title-font">
+					{{ product.name }}
+				</h1>
+				<div class="flex mb-4">
+					<span class="flex items-center">
+						<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 text-green-500" viewBox="0 0 24 24">
+							<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+						</svg>
+						<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 text-green-500" viewBox="0 0 24 24">
+							<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+						</svg>
+						<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 text-green-500" viewBox="0 0 24 24">
+							<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+						</svg>
+						<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 text-green-500" viewBox="0 0 24 24">
+							<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+						</svg>
+						<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 text-green-500" viewBox="0 0 24 24">
+							<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+						</svg>
+						<span class="ml-3 text-gray-600">4 Reviews</span>
+					</span>
+					<span class="flex py-2 pl-3 ml-3 border-l-2 border-gray-200 space-x-2s">
+						<a class="text-gray-500">
+							<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+								<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
+							</svg>
+						</a>
+						<a class="text-gray-500">
+							<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+								<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+							</svg>
+						</a>
+						<a class="text-gray-500">
+							<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+								<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+							</svg>
+						</a>
+					</span>
+				</div>
+				<p class="leading-relaxed">
+					Fam locavore kickstarter distillery. Mixtape chillwave tumeric
+					sriracha taximy chia microdosing tilde DIY. XOXO fam indxgo juiceramps
+					cornhole raw denim forage brooklyn. Everyday carry +1 seitan poutine
+					tumeric. Gastropub blue bottle austin listicle pour-over, neutra jean
+					shorts keytar banjo tattooed umami cardigan.
+				</p>
+				<div class="flex items-center pb-5 mt-6 mb-5 border-b-2 border-gray-100">
+					<div class="flex">
+						<span class="mr-3">Color</span>
+						<button class="w-6 h-6 border-2 border-gray-300 rounded-full focus:outline-none" />
+						<button class="w-6 h-6 ml-1 bg-gray-700 border-2 border-gray-300 rounded-full focus:outline-none" />
+						<button class="w-6 h-6 ml-1 bg-red-500 border-2 border-gray-300 rounded-full focus:outline-none" />
+					</div>
+					<div class="flex items-center ml-6">
+						<span class="mr-3">Size</span>
+						<div class="relative">
+							<select class="py-2 pl-3 pr-10 text-base border border-gray-300 rounded appearance-none focus:outline-none focus:ring-2 focus:ring-green-200 focus:border-green-500">
+								<option>SM</option>
+								<option>M</option>
+								<option>L</option>
+								<option>XL</option>
+							</select>
+							<span class="absolute top-0 right-0 flex items-center justify-center w-10 h-full text-center text-gray-600 pointer-events-none ">
+								<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4" viewBox="0 0 24 24">
+									<path d="M6 9l6 6 6-6" />
+								</svg>
+							</span>
+						</div>
+					</div>
+				</div>
+				<div class="flex">
+					<span class="text-2xl font-medium text-gray-900 title-font">
+						{{ product.price }}
+					</span>
+					<button class="flex px-6 py-2 ml-auto text-white bg-green-500 border-0 rounded focus:outline-none hover:bg-green-600">
+						Button
+					</button>
+					<button class="inline-flex items-center justify-center w-10 h-10 p-0 ml-4 text-gray-500 bg-gray-200 border-0 rounded-full ">
+						<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+							<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
+						</svg>
+					</button>
+				</div>
+			</div>
+		</div>
+	</main>
 </template>
 
 <script>
 import getProduct from '~/gql/queries/getProduct'
 export default {
-  apollo: {
-    product: {
-      query: getProduct,
-      variables() {
-        return {
-          slug: this.$route.params.slug,
-        }
-      },
-    },
-  },
+	apollo: {
+		product: {
+			query: getProduct,
+			variables() {
+				return {
+					slug: this.$route.params.slug
+				}
+			}
+		}
+	}
 }
 </script>