diff --git a/packages/synapse-interface/pages/returntomonke/ImageUploader.tsx b/packages/synapse-interface/pages/returntomonke/ImageUploader.tsx
new file mode 100644
index 0000000000..b43de67709
--- /dev/null
+++ b/packages/synapse-interface/pages/returntomonke/ImageUploader.tsx
@@ -0,0 +1,145 @@
+import { useState, useRef, useEffect } from 'react'
+import Button from '@tw/Button'
+
+export default function ImageUploader() {
+  const [uploadedImage, setUploadedImage] = useState(null)
+  const [processedImage, setProcessedImage] = useState(null)
+
+  const fileInput = useRef(null)
+  const imgRef = useRef(null)
+
+  useEffect(() => {
+    if (uploadedImage) {
+      applyImageOverlay()
+    }
+  }, [uploadedImage])
+
+  function handleFile(file) {
+    setUploadedImage(file)
+  }
+
+  function handleDragOver(event) {
+    event.preventDefault()
+  }
+
+  function handleOnDrop(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    handleFile(event.dataTransfer.files[0])
+    console.log('File drop was a success')
+  }
+
+  const applyImageOverlay = () => {
+    const canvas = imgRef.current
+    const ctx = canvas.getContext('2d')
+
+    // Clear the canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+    // Load the uploaded image
+    const img = new Image()
+    img.src = URL.createObjectURL(uploadedImage)
+    img.onload = () => {
+      if (img.width >= img.height) {
+        canvas.width = img.width
+        canvas.height = img.width
+      } else {
+        canvas.width = img.height
+        canvas.height = img.height
+      }
+
+      // Calculate the start positions to center the image
+      const startX = (canvas.width - img.width) / 2
+      const startY = (canvas.height - img.height) / 2
+
+      // Draw the uploaded image centered
+      ctx.drawImage(img, startX, startY)
+
+      // Load the overlay image
+      const overlay = new Image()
+      overlay.src = './synpfpborder.png'
+      overlay.onload = () => {
+        // Draw the overlay image on top of the uploaded image
+        ctx.drawImage(overlay, 0, 0, canvas.width, canvas.height)
+
+        // Convert the canvas to a Blob and update the state
+        canvas.toBlob((blob) => {
+          setProcessedImage(blob)
+        }, 'image/jpeg')
+      }
+    }
+  }
+
+  return (
+    <div>
+      <div
+        className={`
+          flex ${
+            processedImage ? '' : 'h-[200px]'
+          }  w-full  rounded-xl cursor-pointer
+          border-dashed border-4 border-white border-opacity-50 mb-2
+          text-white text-opacity-50 hover:text-opacity-100
+          hover:border-white
+          transform transition-all duration-200
+        `}
+        style={{
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: 100,
+          backgroundPosition: 'center',
+        }}
+        onDragOver={handleDragOver}
+        onDrop={handleOnDrop}
+        onClick={() => fileInput.current.click()}
+      >
+        <p className="p-3 m-auto text-lg text-center center">
+          {!processedImage && (
+            <>
+              Click to Upload or
+              <br />
+              Drag and drop image here...
+            </>
+          )}
+          {processedImage && <>Select different image?</>}
+        </p>
+        <input
+          type="file"
+          accept="image/*"
+          ref={fileInput}
+          hidden
+          onChange={(e) => handleFile(e.target.files[0])}
+        />
+      </div>
+      {processedImage && (
+        <img src={URL.createObjectURL(processedImage)} alt="preview" />
+      )}
+      <canvas ref={imgRef} style={{ display: 'none' }} />
+      {uploadedImage && (
+        <Button
+          className={`
+            w-full rounded-xl my-2 px-4 py-3 tracking-wide
+            text-white text-opacity-100
+            hover:opacity-80 disabled:opacity-100 disabled:text-[#88818C]
+            disabled:from-bgLight disabled:to-bgLight
+            bg-gradient-to-r from-[#CF52FE] to-[#AC8FFF]
+          `}
+          onClick={() => {
+            downloadBase64File(
+              URL.createObjectURL(processedImage),
+              `synape_${uploadedImage.name?.split('.')[0] ?? 'random'}.jpg`
+            )
+          }}
+        >
+          Download
+        </Button>
+      )}
+    </div>
+  )
+}
+
+function downloadBase64File(dataStr, fileName) {
+  const downloadLink = document.createElement('a')
+  downloadLink.href = dataStr
+  downloadLink.download = fileName
+  downloadLink.click()
+  console.log('evolving into a synape')
+}
diff --git a/packages/synapse-interface/pages/returntomonke/PfpGeneratorCard.tsx b/packages/synapse-interface/pages/returntomonke/PfpGeneratorCard.tsx
new file mode 100644
index 0000000000..2b0bc8177a
--- /dev/null
+++ b/packages/synapse-interface/pages/returntomonke/PfpGeneratorCard.tsx
@@ -0,0 +1,20 @@
+import Card from '@tw/Card'
+
+import ImageUploader from './ImageUploader'
+
+export default function PfpGeneratorCard() {
+  return (
+    <Card
+      title={
+        <>
+          Choose Synapse
+        </>
+      }
+      divider={false}
+      className="rounded-xl min-w-[380px]"
+      titleClassName="text-center text-white text-opacity-50 font-normal py-2"
+    >
+      <ImageUploader />
+    </Card>
+  )
+}
diff --git a/packages/synapse-interface/pages/returntomonke/index.tsx b/packages/synapse-interface/pages/returntomonke/index.tsx
new file mode 100644
index 0000000000..9c94e236dc
--- /dev/null
+++ b/packages/synapse-interface/pages/returntomonke/index.tsx
@@ -0,0 +1,52 @@
+import Grid from '@tw/Grid'
+import { useEffect, useState } from 'react'
+import { useAccount } from 'wagmi'
+
+import { DEFAULT_FROM_CHAIN } from '@/constants/swap'
+import { LandingPageWrapper } from '@layouts/LandingPageWrapper'
+import StandardPageContainer from '@layouts/StandardPageContainer'
+
+import PfpGeneratorCard from './PfpGeneratorCard'
+
+const ReturnToMonkePage = () => {
+  const { address: currentAddress, chain } = useAccount()
+  const [connectedChainId, setConnectedChainId] = useState(0)
+  const [address, setAddress] = useState(undefined)
+
+  useEffect(() => {
+    setConnectedChainId(chain?.id ?? DEFAULT_FROM_CHAIN)
+  }, [chain])
+
+  useEffect(() => {
+    setAddress(currentAddress)
+  }, [currentAddress])
+  return (
+    <LandingPageWrapper>
+      <StandardPageContainer
+        connectedChainId={connectedChainId}
+        address={address}
+      >
+        <div className="flex justify-between">
+          <div>
+            <div className="text-2xl text-white">
+              Generate Synaptic Profile Picture
+            </div>
+          </div>
+        </div>
+        <div className="py-6">
+          <Grid
+            cols={{ xs: 1 }}
+            gap={6}
+            className="justify-center px-2 py-16 sm:px-6 md:px-8"
+          >
+            <div className="pb-3 place-self-center">
+              <PfpGeneratorCard />
+            </div>
+          </Grid>
+        </div>
+      </StandardPageContainer>
+    </LandingPageWrapper>
+  )
+}
+
+export default ReturnToMonkePage
diff --git a/packages/synapse-interface/public/synpfpborder.png b/packages/synapse-interface/public/synpfpborder.png
new file mode 100644
index 0000000000..e507b9a901
Binary files /dev/null and b/packages/synapse-interface/public/synpfpborder.png differ