diff --git a/components/Layout.tsx b/components/Layout.tsx
index e9200cd..81f058a 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -28,7 +28,7 @@ export const Layout = ({ children, metadata = {} }: LayoutProps) => {
       </div> */}
 
       {/* actual layout container */}
-      <div className="hidden sm:flex">
+      <div className="hidden bg-black sm:flex">
         <Sidebar />
         <div className="overflow-auto relative flex-grow h-screen no-scrollbar">
           <main
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index cca407b..339829e 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -22,7 +22,7 @@ export const Sidebar = () => {
     <SidebarLayout>
       {/* Stargaze brand as home button */}
       <Anchor href="/" onContextMenu={(e) => [e.preventDefault(), router.push('/brand')]}>
-        <img alt="Brand Text" className="w-full" src="/stargaze-text.png" />
+        <img alt="Brand Text" className="w-full" src="stargaze_logo_800.svg" />
       </Anchor>
 
       {/* wallet button */}
@@ -33,9 +33,9 @@ export const Sidebar = () => {
         <Anchor
           key={href}
           className={clsx(
-            'py-2 px-4 -mx-4 uppercase', // styling
+            'py-2 px-4 -mx-4 uppercase rounded-lg', // styling
             'hover:bg-white/5 transition-colors', // hover styling
-            { 'font-bold text-plumbus': router.asPath === href }, // active route styling
+            { 'font-bold bg-plumbus hover:bg-plumbus': router.asPath === href }, // active route styling
             // { 'text-gray-500 pointer-events-none': disabled }, // disabled route styling
           )}
           href={href}
diff --git a/components/collections/creation/RoyaltyDetails.tsx b/components/collections/creation/RoyaltyDetails.tsx
index b64a0f7..658fadd 100644
--- a/components/collections/creation/RoyaltyDetails.tsx
+++ b/components/collections/creation/RoyaltyDetails.tsx
@@ -52,7 +52,7 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
         <div className="ml-4 font-bold form-check form-check-inline">
           <input
             checked={royaltyState === 'none'}
-            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            className="peer sr-only"
             id="royaltyRadio1"
             name="royaltyRadioOptions1"
             onClick={() => {
@@ -61,14 +61,17 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
             type="radio"
             value="None"
           />
-          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="royaltyRadio1">
+          <label
+            className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
+            htmlFor="royaltyRadio1"
+          >
             No royalty
           </label>
         </div>
         <div className="ml-4 font-bold form-check form-check-inline">
           <input
             checked={royaltyState === 'new'}
-            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            className="peer sr-only"
             id="royaltyRadio2"
             name="royaltyRadioOptions2"
             onClick={() => {
@@ -77,7 +80,10 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
             type="radio"
             value="Existing"
           />
-          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="royaltyRadio2">
+          <label
+            className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
+            htmlFor="royaltyRadio2"
+          >
             Configure royalty details
           </label>
         </div>
diff --git a/components/collections/creation/UploadDetails.tsx b/components/collections/creation/UploadDetails.tsx
index c501739..2b6ba2c 100644
--- a/components/collections/creation/UploadDetails.tsx
+++ b/components/collections/creation/UploadDetails.tsx
@@ -204,7 +204,7 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
         <div className="mt-3 ml-4 font-bold form-check form-check-inline">
           <input
             checked={uploadMethod === 'existing'}
-            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            className="peer sr-only"
             id="inlineRadio1"
             name="inlineRadioOptions1"
             onClick={() => {
@@ -213,7 +213,10 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
             type="radio"
             value="Existing"
           />
-          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio1">
+          <label
+            className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
+            htmlFor="inlineRadio1"
+          >
             Use an existing base URI
           </label>
         </div>
@@ -221,7 +224,7 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
         <div className="mt-3 ml-4 font-bold form-check form-check-inline">
           <input
             checked={uploadMethod === 'new'}
-            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            className="peer sr-only"
             id="inlineRadio2"
             name="inlineRadioOptions2"
             onClick={() => {
@@ -230,7 +233,10 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
             type="radio"
             value="New"
           />
-          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio2">
+          <label
+            className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
+            htmlFor="inlineRadio2"
+          >
             Upload assets & metadata
           </label>
         </div>
@@ -266,7 +272,7 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                 <div className="form-check form-check-inline">
                   <input
                     checked={uploadService === 'nft-storage'}
-                    className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+                    className="peer sr-only"
                     id="inlineRadio3"
                     name="inlineRadioOptions3"
                     onClick={() => {
@@ -275,7 +281,10 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                     type="radio"
                     value="nft-storage"
                   />
-                  <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio3">
+                  <label
+                    className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
+                    htmlFor="inlineRadio3"
+                  >
                     Upload using NFT.Storage
                   </label>
                 </div>
@@ -283,7 +292,7 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                 <div className="ml-4 form-check form-check-inline">
                   <input
                     checked={uploadService === 'pinata'}
-                    className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+                    className="peer sr-only"
                     id="inlineRadio4"
                     name="inlineRadioOptions4"
                     onClick={() => {
@@ -292,7 +301,10 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                     type="radio"
                     value="pinata"
                   />
-                  <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio4">
+                  <label
+                    className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
+                    htmlFor="inlineRadio4"
+                  >
                     Upload using Pinata
                   </label>
                 </div>
diff --git a/components/collections/creation/WhitelistDetails.tsx b/components/collections/creation/WhitelistDetails.tsx
index ad7d24b..77eaace 100644
--- a/components/collections/creation/WhitelistDetails.tsx
+++ b/components/collections/creation/WhitelistDetails.tsx
@@ -97,7 +97,7 @@ export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
         <div className="ml-4 font-bold form-check form-check-inline">
           <input
             checked={whitelistState === 'none'}
-            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            className="peer sr-only"
             id="whitelistRadio1"
             name="whitelistRadioOptions1"
             onClick={() => {
@@ -106,14 +106,17 @@ export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
             type="radio"
             value="None"
           />
-          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="whitelistRadio1">
+          <label
+            className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
+            htmlFor="whitelistRadio1"
+          >
             No whitelist
           </label>
         </div>
         <div className="ml-4 font-bold form-check form-check-inline">
           <input
             checked={whitelistState === 'existing'}
-            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            className="peer sr-only"
             id="whitelistRadio2"
             name="whitelistRadioOptions2"
             onClick={() => {
@@ -122,14 +125,17 @@ export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
             type="radio"
             value="Existing"
           />
-          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="whitelistRadio2">
+          <label
+            className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
+            htmlFor="whitelistRadio2"
+          >
             Existing whitelist
           </label>
         </div>
         <div className="ml-4 font-bold form-check form-check-inline">
           <input
             checked={whitelistState === 'new'}
-            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            className="peer sr-only"
             id="whitelistRadio3"
             name="whitelistRadioOptions3"
             onClick={() => {
@@ -138,7 +144,10 @@ export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
             type="radio"
             value="New"
           />
-          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="whitelistRadio3">
+          <label
+            className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
+            htmlFor="whitelistRadio3"
+          >
             New whitelist
           </label>
         </div>
diff --git a/pages/collections/create.tsx b/pages/collections/create.tsx
index eeacfae..3732a90 100644
--- a/pages/collections/create.tsx
+++ b/pages/collections/create.tsx
@@ -464,7 +464,7 @@ const CollectionCreationPage: NextPage = () => {
         <div className="flex justify-end w-full">
           <Button className="px-0 mb-6 max-h-12" isLoading={creatingCollection} onClick={performChecks} variant="solid">
             <label
-              className="relative justify-end w-full h-full text-white bg-plumbus hover:bg-plumbus border-0 btn modal-button"
+              className="relative justify-end w-full h-full text-white bg-plumbus hover:bg-plumbus-light border-0 btn modal-button"
               htmlFor="my-modal-2"
             >
               Create Collection
diff --git a/pages/index.tsx b/pages/index.tsx
index e16adb9..0798377 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,7 +6,7 @@ const HomePage: NextPage = () => {
   return (
     <section className="px-8 pt-4 pb-16 mx-auto space-y-8 max-w-4xl">
       <div className="flex justify-center items-center py-8 max-w-xl">
-        <img alt="Brand Text" className="ml-[50%] w-full" src="/stargaze-text.png" />
+        <img alt="Brand Text" className="ml-[50%] w-full" src="/stargaze_logo_800.svg" />
       </div>
       <h1 className="font-heading text-4xl font-bold">Welcome!</h1>
       <p className="text-xl">
diff --git a/public/stargaze-text.png b/public/stargaze-text.png
deleted file mode 100644
index cb6ee1b..0000000
Binary files a/public/stargaze-text.png and /dev/null differ
diff --git a/public/stargaze_logo_800.svg b/public/stargaze_logo_800.svg
new file mode 100644
index 0000000..bd28267
--- /dev/null
+++ b/public/stargaze_logo_800.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="801px" height="161px" viewBox="0 0 801 161" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>stargaze_logo</title>
+    <defs>
+        <linearGradient x1="0.0995425432%" y1="47.2856461%" x2="104.967972%" y2="50.3175741%" id="linearGradient-1">
+            <stop stop-color="#FFF59E" offset="0%"></stop>
+            <stop stop-color="#81EFD9" offset="63.5417%"></stop>
+            <stop stop-color="#6B9BE3" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="stargaze_logo" transform="translate(0.357912, -0.000003)" fill="url(#linearGradient-1)">
+            <path d="M41.3060853,35.0506617 L77.4908947,35.0506617 L77.4908947,0.0952535567 L41.9975438,0.0952535567 C6.73463446,-0.86903264 0.972725983,4.91668454 0.0178962024,43.9703426 L0.0178962024,53.8539743 C-0.410124003,88.809852 6.73463446,98.6934837 32.7784769,97.9705038 L39.2317768,97.9705038 L39.2317768,125.934669 L0.742217452,125.934669 L0.742217452,160.889876 L39.0013353,160.889876 C66.658268,160.889876 68.5026045,160.408337 75.4165191,151.970665 C80.0260191,144.255973 80.9481873,139.193772 81.6396458,115.568827 L81.6396458,105.684525 C81.6396458,71.6937384 74.7250606,62.5330866 48.6813523,63.0152968 L41.3060853,63.0152968 L41.3060853,35.0506617 Z M146.173316,35.0501252 L164.842025,35.0501252 L164.842025,0.0947170224 L86.2498165,0.0947170224 L86.2498165,35.0501252 L104.918526,35.0501252 L104.918526,160.889876 L146.173316,160.889876 L146.173316,35.0501252 Z M215.051572,160.889876 L173.796112,160.889876 L173.796112,32.8804477 C174.25686,4.43400491 179.557819,0.0947170224 215.314474,0.0947170224 L232.139518,0.0947170224 C267.86331,0.0947170224 273.164268,4.19289983 273.625017,32.8804477 L273.625017,160.889876 L232.370227,160.889876 L232.370227,126.898419 L215.084435,126.898419 L215.084435,160.889876 L215.051572,160.889876 Z M232.337365,91.2195615 L232.337365,48.7911029 C232.337365,38.4251269 229.57153,33.8447339 223.579113,33.8447339 C217.586696,33.8447339 215.051572,38.6661649 215.051572,48.7911029 L215.051572,91.2195615 L232.337365,91.2195615 Z M388.369575,31.1927121 C387.217368,3.46945045 382.147119,-0.628732359 351.493575,0.0944487553 L288.573532,0.0944487553 L288.573532,160.889206 L329.828993,160.889206 L329.828993,97.9698331 L335.129951,97.9698331 C343.887532,98.2106029 347.344824,102.309054 347.114785,112.434126 L347.114785,133.88946 C347.114785,145.219723 348.036283,153.898164 350.341368,160.889206 L391.596158,160.889206 C389.752492,154.139605 388.369575,144.496743 388.369575,133.88946 L388.369575,109.058655 C388.830995,90.9787917 383.068617,83.2640997 365.782824,78.4426687 C383.068617,76.9960382 389.061034,66.8716368 388.369575,41.5588223 L388.369575,31.1927121 Z M347.344824,49.2733131 C347.344824,60.6035753 345.270449,63.0139555 335.5907,63.0139555 L329.828993,63.0139555 L329.828993,35.0498569 L335.5907,35.0498569 C344.348951,35.0498569 347.344824,38.6659637 347.344824,49.2733131 Z M501.568244,125.211689 C502.028993,157.273635 497.189454,161.613527 460.774203,160.889876 L443.718449,160.889876 C404.537364,161.372086 401.772201,158.479496 402.23295,117.496997 L402.00224,104.961545 L402.00224,56.7472353 C402.430126,4.43440731 405.887419,-0.14598566 443.685587,0.0951194231 L501.535381,0.0951194231 L501.535381,39.6308535 C496.695171,37.220138 485.171757,35.5326707 471.573296,35.0505276 L457.053338,35.0505276 C444.377045,35.0505276 443.224838,36.2558518 443.224838,49.7561939 L443.224838,106.889715 C442.994128,123.765059 444.146335,125.693229 453.596045,125.934669 L460.27992,125.934669 L460.27992,87.1217811 C460.27992,80.6129498 459.127713,75.0685389 457.053338,69.0419179 L501.535381,69.0419179 L501.535381,125.211689 L501.568244,125.211689 Z M515.59392,160.889876 L556.84871,160.889876 L556.84871,126.898419 L574.134502,126.898419 L574.134502,160.889876 L615.389963,160.889876 L615.389963,32.8804477 C614.929214,4.19289983 609.628256,0.0947170224 573.904463,0.0947170224 L557.07942,0.0947170224 C521.355627,0.0947170224 516.054669,4.43400491 515.59392,32.8804477 L515.59392,160.889876 Z M574.134502,48.7911029 L574.134502,91.2195615 L556.84871,91.2195615 L556.84871,48.7911029 C556.84871,38.6661649 559.384505,33.8447339 565.376922,33.8447339 C571.369339,33.8447339 574.134502,38.4251269 574.134502,48.7911029 Z M709.42631,0.0947170224 L675.081411,125.933999 L711.961435,125.933999 L707.34724,160.889876 L624.839002,160.889876 L659.642638,35.0501252 L625.300421,35.0501252 L630.13996,0.0947170224 L709.42631,0.0947170224 Z M761.973134,35.0497899 L800,35.0497899 L800,0.0943146217 L761.510374,0.0943146217 C725.555872,-0.387828477 721.639171,4.43366958 720.720357,51.6836932 L720.720357,103.032034 C720.485623,126.656979 722.329959,144.014533 725.555872,149.558943 C731.779669,159.924785 734.086766,160.648436 761.510374,160.889206 L800,160.889206 L800,125.933999 L761.973134,125.933999 L761.973134,97.9691624 L800,97.9691624 L800,63.0139555 L761.973134,63.0139555 L761.973134,35.0497899 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 1d4d035..3676244 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,7 +12,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        stargaze: { DEFAULT: '#FFA900' },
+        stargaze: { DEFAULT: '#DB2676' },
         dark: { DEFAULT: '#06090B' },
         gray: { DEFAULT: '#F3F6F8' },
         'dark-gray': { DEFAULT: '#191D20' },
@@ -20,16 +20,16 @@ module.exports = {
 
         neutral: colors.neutral,
         plumbus: {
-          DEFAULT: '#FFA900',
-          light: '#FFC922',
+          DEFAULT: '#DB2676',
+          light: '#AF1F5F',
           matte: '#5D89E9',
           dark: '#FFC900',
           10: '#FFF0ED',
           20: '#5D89E9',
           30: '#F5A7A2',
-          40: '#FFA900',
-          50: '#FFA900',
-          60: '#FFA900',
+          40: '#DB2676',
+          50: '#DB2676',
+          60: '#DB2676',
           70: '#AB5152',
           80: '#944144',
           90: '#7D3136',