diff --git a/docs/create-store.md b/docs/create-store.md
new file mode 100644
index 0000000..8b6c7ce
--- /dev/null
+++ b/docs/create-store.md
@@ -0,0 +1,68 @@
+# Create Store
+
+To create a storefront powered by Metaplex, you need to create a store on the Metaplex platform. This guide will outline
+steps you need to take to create your store. After creating your store, this guide will show you how to manage your
+store information, such as who to whitelist as creators.
+
+## Prerequisites
+* You should have an understanding of `React` concepts such as hooks. Please refer to the React documentation
+ [here](https://reactjs.org/docs/getting-started.html).
+* To create your store, you will need to have a wallet that contains token to perform your transactions.
+* Knowing what the different `packages` are and what are their purposes would help but isn't required
+
+## Getting Started
+
+### Setting Up the Store ID
+
+To create a store, you must first derive the store ID given your public address. The Metaplex devs have already created
+an environment variable for you to utilize - `REACT_APP_STORE_OWNER_ADDRESS_ADDRESS` - which you should set to be your
+wallet public address. To do this, you can create a `.env` file in `packages/web`, and set
+`REACT_APP_STORE_OWNER_ADDRESS_ADDRESS` to be your wallet public address in there.
+
+```
+REACT_APP_STORE_OWNER_ADDRESS_ADDRESS=YOUR_PUBLIC_WALLET_ADDRESS
+```
+
+### Create Your Store
+
+After creating your store ID, you may now create your store. The Metaplex platform has many helper methods to help you
+to create your store. To create your store, you can use the `saveAdmin` method (`packages/web/src/actions/saveAdmin`)
+The easiest way to do this would be to either create a script or render a button locally to click to call this method.
+Please look at the function parameters of `saveAdmin` to see what parameters you would like to pass in:
+
+```js
+saveAdmin(connection, wallet, false, [])
+```
+
+If you opted to create a button or something to click to call this method, here are some small snippets:
+
+```js
+// These are hooks you should insert at the top of the component your rendering your button in
+const { wallet } = useWallet();
+const connection = useConnection();
+```
+
+```js
+// The button to render somewhere for you to click
+
+```
+
+You will be required to confirm your transactions if you decided to put a button or something to click. After clicking
+the button, make sure you don't browse anywhere else or close the website.
+
+### Adding Your Information
+
+After creating your store, you must also insert your wallet public key and information in `userNames.json` at
+`packages/web/src/config/userNames.json`. Make sure you follow the same format as the other objects in this file.
+
+### Accessing the Admin Panel
+
+After creating your store, you can now access `YOUR_URL/#/admin`. This is where you can edit your store and add
+whitelisted creators. Add yourself if you need to or make it a public store, so anyone can create NFTs in your store.
+Remember to click save after making your changes.
diff --git a/js/packages/web/src/App.less b/js/packages/web/src/App.less
index 0574325..cc641cf 100644
--- a/js/packages/web/src/App.less
+++ b/js/packages/web/src/App.less
@@ -74,6 +74,10 @@ code {
}
}
+.ant-image-img {
+ border-radius: 8px;
+}
+
.ant-card-cover {
position: relative;
overflow: hidden;
diff --git a/js/packages/web/src/actions/nft.tsx b/js/packages/web/src/actions/nft.tsx
index 590c643..d358ea2 100644
--- a/js/packages/web/src/actions/nft.tsx
+++ b/js/packages/web/src/actions/nft.tsx
@@ -210,7 +210,7 @@ export const mintNFT = async (
const result: IArweaveResult = await (
await fetch(
// TODO: add CNAME
- env === 'mainnet-beta'
+ env.startsWith('mainnet-beta')
? 'https://us-central1-principal-lane-200702.cloudfunctions.net/uploadFileProd-1'
: 'https://us-central1-principal-lane-200702.cloudfunctions.net/uploadFile-1',
{
diff --git a/js/packages/web/src/components/PreSaleBanner/index.less b/js/packages/web/src/components/PreSaleBanner/index.less
index 32fc1dc..0171a1f 100644
--- a/js/packages/web/src/components/PreSaleBanner/index.less
+++ b/js/packages/web/src/components/PreSaleBanner/index.less
@@ -10,6 +10,11 @@
background-size: auto 240px;
}
+.explore {
+ display: flex;
+ padding: 10px
+}
+
.explore .square {
max-width: 355px;
min-width: 355px;
@@ -38,4 +43,4 @@
display: flex;
flex-wrap: wrap;
align-items: center;
-}
\ No newline at end of file
+}
diff --git a/js/packages/web/src/views/art/index.tsx b/js/packages/web/src/views/art/index.tsx
index 66c434c..3ca55b7 100644
--- a/js/packages/web/src/views/art/index.tsx
+++ b/js/packages/web/src/views/art/index.tsx
@@ -49,9 +49,9 @@ export const ArtView = () => {
category={art.category}
extension={art.image}
uri={art.image}
- style={{ width: 500 }}
- height={500}
- width={500}
+ style={{ width: 300 }}
+ height={300}
+ width={300}
className="artwork-image"
files={art.files}
active={true}
@@ -67,7 +67,8 @@ export const ArtView = () => {