diff --git a/.gitignore b/.gitignore
index 27cf4f0a..e91b9927 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,4 +12,5 @@ character-assets
 .eslint-cache
 .env
 .eslintcache
-lerna-debug.log
\ No newline at end of file
+lerna-debug.log
+.vscode
\ No newline at end of file
diff --git a/package.json b/package.json
index 56762747..9b968ff0 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "eslint-plugin-no-inline-styles": "^1.0.5",
     "eslint-plugin-react": "^7.31.11",
     "prettier": "^2.3.2",
+    "sass": "^1.58.0",
     "vite": "^4.0.0"
   }
 }
diff --git a/public/assets/icons/polygon.svg b/public/assets/icons/polygon.svg
new file mode 100644
index 00000000..2ee2e72a
--- /dev/null
+++ b/public/assets/icons/polygon.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="37.000000pt" height="37.000000pt" viewBox="0 0 37.000000 37.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,37.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M58 307 c-36 -21 -38 -25 -38 -74 0 -51 2 -54 40 -78 22 -14 43 -25
+47 -25 4 0 38 19 76 41 69 41 70 41 103 25 29 -13 34 -21 34 -50 0 -27 -7 -39
+-30 -56 -28 -20 -31 -20 -60 -5 -19 10 -30 23 -30 36 0 27 -24 19 -28 -9 -2
+-15 7 -28 37 -46 22 -15 43 -26 46 -26 3 0 24 11 46 25 40 26 40 26 37 81 -3
+53 -5 57 -43 79 l-40 24 -73 -45 -74 -45 -31 19 c-43 25 -45 75 -5 105 27 20
+29 20 63 4 19 -9 35 -23 35 -32 0 -8 5 -15 10 -15 6 0 10 11 10 24 0 17 -11
+30 -36 45 -43 26 -50 26 -96 -2z"/>
+</g>
+</svg>
diff --git a/src/App.jsx b/src/App.jsx
index 1d569376..e30f8347 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -18,6 +18,7 @@ import Background from "./components/Background"
 import View from "./pages/View"
 import Save from "./pages/Save"
 import Load from "./pages/Load"
+import Mint from "./pages/Mint"
 import BioPage from "./pages/Bio"
 import Create from "./pages/Create"
 import Landing from "./pages/Landing"
@@ -181,7 +182,7 @@ export default function App() {
   const updateCameraPosition = () => {
     if (!effectManager.camera) return
 
-    if ([ViewMode.BIO, ViewMode.MINT, ViewMode.CHAT].includes(viewMode)) {
+    if ([ViewMode.BIO, ViewMode.CHAT].includes(viewMode)) {
       // auto move camera
       if (viewMode === ViewMode.CHAT) {
         cameraDistance = cameraDistanceChat
@@ -292,7 +293,7 @@ export default function App() {
     ),
     [ViewMode.CREATE]: <Create fetchNewModel={fetchNewModel} />,
     [ViewMode.LOAD]: <Load />,
-    // [ViewMode.MINT]: <Mint />,
+    [ViewMode.MINT]: <Mint />,
     [ViewMode.SAVE]: <Save />,
     [ViewMode.CHAT]: <View templateInfo={templateInfo} />,
   }
diff --git a/src/components/custom-button/IconCollection.jsx b/src/components/custom-button/IconCollection.jsx
index 5918c6fa..68363aef 100644
--- a/src/components/custom-button/IconCollection.jsx
+++ b/src/components/custom-button/IconCollection.jsx
@@ -123,4 +123,12 @@ export const IconCollection = [
     name: 'soundoff',
     file: '/assets/icons/soundoff.svg',
   },
+  {
+    name: 'soundoff',
+    file: '/assets/icons/soundoff.svg',
+  },
+  {
+    name: 'polygon',
+    file: '/assets/icons/polygon.svg',
+  },
 ];
\ No newline at end of file
diff --git a/src/pages/Mint.jsx b/src/pages/Mint.jsx
index fd7f4a5b..0e2fd357 100644
--- a/src/pages/Mint.jsx
+++ b/src/pages/Mint.jsx
@@ -1,14 +1,14 @@
 import React from "react"
-import styles from "./Mint.module.css"
+import styles from "./Mint.module.scss"
 import { ViewMode, ViewContext } from "../context/ViewContext"
 
-import Mint from "../components/Mint"
-import ResizableDiv from "../components/Resizable"
+// import Mint from "../components/Mint"
+// import ResizableDiv from "../components/Resizable"
 import CustomButton from "../components/custom-button"
 
 function MintComponent() {
   const { setViewMode } = React.useContext(ViewContext)
-  const [screenshotPosition,  setScreenshotPosition] = React.useState({x:250,y:25,width:256,height:256});
+  // const [screenshotPosition,  setScreenshotPosition] = React.useState({x:250,y:25,width:256,height:256});
 
   const back = () => {
     setViewMode(ViewMode.SAVE)
@@ -18,19 +18,48 @@ function MintComponent() {
     setViewMode(ViewMode.CHAT)
   }
 
+  function MenuTitle() {
+    return (
+      <div className={styles["mainTitleWrap"]}>
+        <div className={styles["topLine"]} />
+        <div className={styles["mainTitle"]}>Mint</div>
+      </div>
+    )
+  }
+
   return (
     <div className={styles.container}>
       <div className={"sectionTitle"}>Mint Your Character</div>
-      <ResizableDiv setScreenshotPosition = {setScreenshotPosition} screenshotPosition = {screenshotPosition}/>
+      
+      {/* <ResizableDiv setScreenshotPosition = {setScreenshotPosition} screenshotPosition = {screenshotPosition}/> */}
+
       <div className={styles.mintContainer}>
-        <div className={styles.topLine} />
-        <div className={styles.bottomLine} />
-        <div className={styles.scrollContainer}>
-          
-          <Mint screenshotPosition = {screenshotPosition}/>
+        <MenuTitle />
+
+        <div className={styles.mintButtonContainer}>
+          <CustomButton
+            size={16}
+            theme="light"
+            icon="polygon"
+            text="Open Edition"
+            className={styles.mintButton}
+          />
+
+          <div className={styles.divider}></div>
+
+          <CustomButton
+            size={16}
+            theme="light"
+            icon="tokens"
+            text="Genesis Edition"
+            className={styles.mintButton}
+          />
+
+          <span className={styles.genesisText}>(<span className={styles.required}>Genesis pass holders only</span>)</span>
         </div>
       </div>
-      <div className={styles.buttonContainer}>
+
+      <div className={styles.bottomContainer}>
         <CustomButton
           theme="light"
           text="Back"
diff --git a/src/pages/Mint.module.css b/src/pages/Mint.module.css
deleted file mode 100644
index 3a9a0daf..00000000
--- a/src/pages/Mint.module.css
+++ /dev/null
@@ -1,113 +0,0 @@
-.mintContainer {
-    position: absolute;
-    width: 100%;
-    max-width: 50%;
-    top: 50%;
-    right: 32px;
-    transform: translateY(-50%);
-    -webkit-transform: translateY(-50%);
-    text-align: center;
-    height: -webkit-calc(100vh - 266px);
-    height: calc(100vh - 266px);
-    background: rgba(5, 11, 14, 0.8);
-    color: aliceblue;
-    user-select: none;
-  }
-  
-  .scrollContainer {
-    height: 98%;
-    width: 99%;
-    position: absolute;
-    left: 0;
-    top: 2px;
-    overflow-x: hidden;
-    overflow-y: scroll;
-  }
-  
-  .topLine {
-      background: rgb(0, 149, 100);
-      background: -moz-linear-gradient(
-        90deg,
-        rgba(0, 149, 100, 0) 0%,
-        rgba(8, 234, 160, 1) 50%,
-        rgba(0, 149, 100, 0) 100%
-      );
-      background: -webkit-linear-gradient(
-        90deg,
-        rgba(0, 149, 100, 0) 0%,
-        rgba(8, 234, 160, 1) 50%,
-        rgba(0, 149, 100, 0) 100%
-      );
-      background: linear-gradient(
-        90deg,
-        rgba(0, 149, 100, 0) 0%,
-        rgba(8, 234, 160, 1) 50%,
-        rgba(0, 149, 100, 0) 100%
-      );
-      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#009564",endColorstr="#009564",GradientType=1);
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 1px;
-    }
-    
-    .bottomLine {
-      background: rgb(0, 149, 100);
-      background: -moz-linear-gradient(
-        90deg,
-        rgba(0, 149, 100, 0) 0%,
-        rgba(8, 234, 160, 1) 50%,
-        rgba(0, 149, 100, 0) 100%
-      );
-      background: -webkit-linear-gradient(
-        90deg,
-        rgba(0, 149, 100, 0) 0%,
-        rgba(8, 234, 160, 1) 50%,
-        rgba(0, 149, 100, 0) 100%
-      );
-      background: linear-gradient(
-        90deg,
-        rgba(0, 149, 100, 0) 0%,
-        rgba(8, 234, 160, 1) 50%,
-        rgba(0, 149, 100, 0) 100%
-      );
-      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#009564",endColorstr="#009564",GradientType=1);
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 1px;
-    }
-  
-  .buttonContainer {
-    position: absolute;
-    bottom: 20px;
-    left: 32px;
-    width: calc(100% - 64px);
-    width: -webkit-calc(100% - 64px);
-    text-align: center;
-  }
-  
-  .buttonContainer .buttonLeft {
-    float: left;
-  }
-  
-  .buttonContainer .buttonRight {
-    float: Right;
-  }
-  
-  .buttonContainer .buttonCenter {
-    margin: 0 8px;
-  }
-  
-  .buttonContainer::after {
-    content: " ";
-    display: block;
-    clear: both;
-  }
-  
-  .buttonContainer button {
-    min-width: 120px;
-  }
-  
\ No newline at end of file
diff --git a/src/pages/Mint.module.scss b/src/pages/Mint.module.scss
new file mode 100644
index 00000000..91082c81
--- /dev/null
+++ b/src/pages/Mint.module.scss
@@ -0,0 +1,154 @@
+.container {
+  display: flex;
+  height: inherit;
+  flex-direction: column;
+
+  .mintContainer {
+    &::before {
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      content: "";
+      z-index: -1;
+      position: absolute;
+      background: rgb(4, 17, 22);
+      -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 9% 100%);
+      clip-path: polygon(0 0, 100% 0, 90% 100%, 9% 100%);
+    }
+
+    width: 100%;
+    margin: auto;
+    height: 250px;
+    max-width: 350px;
+    position: relative;
+    text-align: center;
+
+    z-index: 1;
+    display: flex;
+    color: aliceblue;
+    user-select: none;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+
+    .mainTitleWrap {
+      z-index: 0;
+      width: 100px;
+      margin: -24px;
+      color: #5eb086;
+      font-size: 24px;
+      text-align: center;
+      padding: 8px 0 8px 0;
+      background: rgb(12, 20, 24);
+
+      margin-left: auto;
+      margin-right: auto;
+      position: relative;
+
+      .mainTitle {
+        text-transform: uppercase;
+      }
+    }
+
+    .mintButtonContainer {
+      width: 100%;
+      display: flex;
+      margin-top: auto;
+      margin-bottom: auto;
+      align-items: center;
+      flex-direction: column;
+
+      .mintButton > div {
+        padding: 16px !important;
+      }
+
+      .genesisText {
+        opacity: 0.4;
+
+        .required:after {
+          content: "*";
+          color: red;
+        }
+      }
+
+      .divider {
+        width: 80%;
+        height: 1px;
+        margin: 8px 0;
+        opacity: 0.2;
+        background: #e0e6e5;
+      }
+    }
+  }
+
+  .bottomContainer {
+    z-index: 0;
+    display: flex;
+    padding: 20px 32px;
+    justify-content: space-between;
+
+    button {
+      min-width: 120px;
+    }
+  }
+}
+
+.topLine {
+  background: rgb(0, 149, 100);
+  background: -moz-linear-gradient(
+    90deg,
+    rgba(0, 149, 100, 0) 0%,
+    rgba(8, 234, 160, 1) 50%,
+    rgba(0, 149, 100, 0) 100%
+  );
+
+  background: -webkit-linear-gradient(
+    90deg,
+    rgba(0, 149, 100, 0) 0%,
+    rgba(8, 234, 160, 1) 50%,
+    rgba(0, 149, 100, 0) 100%
+  );
+
+  background: linear-gradient(
+    90deg,
+    rgba(0, 149, 100, 0) 0%,
+    rgba(8, 234, 160, 1) 50%,
+    rgba(0, 149, 100, 0) 100%
+  );
+
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  position: absolute;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#009564",endColorstr="#009564",GradientType=1);
+}
+
+.bottomLine {
+  background: rgb(0, 149, 100);
+  background: -moz-linear-gradient(
+    90deg,
+    rgba(0, 149, 100, 0) 0%,
+    rgba(8, 234, 160, 1) 50%,
+    rgba(0, 149, 100, 0) 100%
+  );
+  background: -webkit-linear-gradient(
+    90deg,
+    rgba(0, 149, 100, 0) 0%,
+    rgba(8, 234, 160, 1) 50%,
+    rgba(0, 149, 100, 0) 100%
+  );
+  background: linear-gradient(
+    90deg,
+    rgba(0, 149, 100, 0) 0%,
+    rgba(8, 234, 160, 1) 50%,
+    rgba(0, 149, 100, 0) 100%
+  );
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#009564",endColorstr="#009564",GradientType=1);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+}
diff --git a/src/pages/Save.jsx b/src/pages/Save.jsx
index 51b0048b..19d01ecb 100644
--- a/src/pages/Save.jsx
+++ b/src/pages/Save.jsx
@@ -12,9 +12,9 @@ function Save() {
         setViewMode(ViewMode.BIO)
     }
 
-    const mint = () => {
-        setViewMode(ViewMode.CHAT)
-    }
+    // const mint = () => {
+    //     setViewMode(ViewMode.MINT)
+    // }
 
 
   const next = () => {
@@ -25,30 +25,36 @@ function Save() {
         <div className={styles.container}>
             <div className={"sectionTitle"}>Save Your Character</div>
             <div className={styles.buttonContainer}>
-                <CustomButton
-                    theme="light"
-                    text="Back"
-                    size={14}
-                    className={styles.buttonLeft}
-                    onClick={back}
-                />
+                <div className={styles.leftButtonContainer}>
+                    <CustomButton
+                        theme="light"
+                        text="Back"
+                        size={14}
+                        className={styles.buttonLeft}
+                        onClick={back}
+                    />
+                </div>
+                
+
                 <ExportMenu />
-                {/*
-                <CustomButton
-                    theme="light"
-                    text="Chat"
-                    size={14}
-                    className={styles.buttonRight}
-                    onClick={mint}
-                />
-                */}
-                <CustomButton
-                    theme="light"
-                    text="Chat"
-                    size={14}
-                    className={styles.buttonRight}
-                    onClick={next}
-                />
+
+                <div className={styles.rightButtonContainer}>
+                    {/* <CustomButton
+                        theme="light"
+                        text="Mint"
+                        size={14}
+                        className={styles.buttonRight}
+                        onClick={mint}
+                    /> */}
+                
+                    <CustomButton
+                        theme="light"
+                        text="Chat"
+                        size={14}
+                        className={styles.buttonRight}
+                        onClick={next}
+                    />
+                </div>
             </div>
         </div>
     );
diff --git a/src/pages/Save.module.css b/src/pages/Save.module.css
index fa9073a0..416fb1d7 100644
--- a/src/pages/Save.module.css
+++ b/src/pages/Save.module.css
@@ -1,18 +1,26 @@
+.container{
+    height: 100%;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+}
+
 .buttonContainer {
-    position: absolute;
-    bottom: 20px;
-    left: 32px;
-    width: calc(100% - 64px);
-    width: -webkit-calc(100% - 64px);
-    text-align: center;
+    z-index: 0;
+    width: 100%;
+    padding: 20px 32px;
+    display: flex;
 }
 
-.buttonContainer .buttonLeft {
-    float: left;
+.buttonContainer .leftButtonContainer{
+    margin-right: auto;
+    display: inline-flex;
+
 }
 
-.buttonContainer .buttonRight {
-    float: Right;
+.buttonContainer .rightButtonContainer{
+    margin-left: auto;
+    display: inline-flex;
 }
 
 .buttonContainer .buttonCenter {