diff --git a/example/next-storage/components/Account.tsx b/example/next-storage/components/Account.tsx
index dd3aceac7..d275cc5f5 100644
--- a/example/next-storage/components/Account.tsx
+++ b/example/next-storage/components/Account.tsx
@@ -5,7 +5,13 @@ import Avatar from './Avatar'
 import { AuthSession } from '../../../dist/main'
 import { DEFAULT_AVATARS_BUCKET, Profile } from '../lib/constants'
 
-export default function Account({ session }: { session: AuthSession }) {
+export default function Account({
+  session,
+  onSaveComplete,
+}: {
+  session: AuthSession
+  onSaveComplete: Function
+}) {
   const [loading, setLoading] = useState<boolean>(true)
   const [uploading, setUploading] = useState<boolean>(false)
   const [avatar, setAvatar] = useState<string | null>(null)
@@ -111,33 +117,18 @@ export default function Account({ session }: { session: AuthSession }) {
       alert(error.message)
     } finally {
       setLoading(false)
+      onSaveComplete()
     }
   }
 
   return (
-    <div
-      style={{
-        minWidth: 250,
-        maxWidth: 600,
-        margin: 'auto',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 20,
-      }}
-    >
-      <div className="card">
-        <div>
-          <Avatar url={avatar} size={270} />
-        </div>
-        <UploadButton onUpload={uploadAvatar} loading={uploading} />
-      </div>
-
+    <div className="account">
       <div>
         <label htmlFor="email">Email</label>
         <input id="email" type="text" value={session.user.email} disabled />
       </div>
       <div>
-        <label htmlFor="username">Username</label>
+        <label htmlFor="username">Name</label>
         <input
           id="username"
           type="text"
@@ -154,10 +145,23 @@ export default function Account({ session }: { session: AuthSession }) {
           onChange={(e) => setWebsite(e.target.value)}
         />
       </div>
+      <div>
+        <label htmlFor="avatar">Avatar image</label>
+        <div className="avatarField">
+          <div className="avatarContainer">
+            {avatar ? (
+              <Avatar url={avatar} size={40} />
+            ) : (
+              <div className="avatarPlaceholder">?</div>
+            )}
+          </div>
+          <UploadButton onUpload={uploadAvatar} loading={uploading} />
+        </div>
+      </div>
 
       <div>
         <button className="button block primary" onClick={() => updateProfile()} disabled={loading}>
-          {loading ? 'Loading ...' : 'Update'}
+          {loading ? 'Loading ...' : 'Save and preview'}
         </button>
       </div>
 
diff --git a/example/next-storage/components/Auth.tsx b/example/next-storage/components/Auth.tsx
index d208b075f..92a6d8cc1 100644
--- a/example/next-storage/components/Auth.tsx
+++ b/example/next-storage/components/Auth.tsx
@@ -10,11 +10,7 @@ export default function Auth({}) {
     try {
       setLoading(true)
       const { error, user } = await supabase.auth.signIn({ email })
-
-      if (error) {
-        throw error
-      }
-
+      if (error) throw error
       console.log('user', user)
       alert('Check your email for the login link!')
     } catch (error) {
@@ -26,18 +22,23 @@ export default function Auth({}) {
   }
 
   return (
-    <div style={{ display: 'flex', gap: 20, flexDirection: 'column' }}>
-      <div>
-        <label>Email</label>
+    <div className="authContainer">
+      <div className="authTitle">
+        <h1 className="header">Experience our open-source storage system</h1>
+        <p className="description">
+          Through a simple profile management example. Create your user profile and upload an avatar
+          image - Fast, simple, secure.
+        </p>
+      </div>
+      <div className="authWidget" style={{ display: 'flex', gap: 20, flexDirection: 'column' }}>
+        <p className="description">Sign in via magic link with your email below</p>
         <input
+          className="inputField"
           type="email"
           placeholder="Your email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
         />
-      </div>
-
-      <div>
         <button
           onClick={(e) => {
             e.preventDefault()
@@ -46,9 +47,13 @@ export default function Auth({}) {
           className={'button block'}
           disabled={loading}
         >
-          {loading ? 'Loading ..' : 'Send magic link'}
+          {loading ? <img className="loader" src="loader.svg" /> : <span>Send magic link</span>}
         </button>
       </div>
+      <div className="footer">
+        Powered by
+        <img src="logo.png" />
+      </div>
     </div>
   )
 }
diff --git a/example/next-storage/components/ProfileCard.tsx b/example/next-storage/components/ProfileCard.tsx
index 1de252f76..89753872c 100644
--- a/example/next-storage/components/ProfileCard.tsx
+++ b/example/next-storage/components/ProfileCard.tsx
@@ -4,11 +4,19 @@ import Avatar from './Avatar'
 export default function ProfileCard({ profile }: { profile: Profile }) {
   const lastUpdated = profile.updated_at ? new Date(profile.updated_at) : null
   return (
-    <div className="card">
-      <Avatar url={profile.avatar_url} size={50} />
-      <p>Username: {profile.username}</p>
-      <p>Website: {profile.website}</p>
-      <p>
+    <>
+      <div className="profileCard">
+        <div className="avatarContainer">
+          <Avatar url={profile.avatar_url} size={200} />
+        </div>
+        <div className="userInfo">
+          <p className="username">{profile.username}</p>
+          <a href={profile.website} target="_blank" className="website">
+            {profile.website}
+          </a>
+        </div>
+      </div>
+      <p style={{ marginTop: '0px' }}>
         <small>
           Last updated{' '}
           {lastUpdated
@@ -16,6 +24,6 @@ export default function ProfileCard({ profile }: { profile: Profile }) {
             : 'Never'}
         </small>
       </p>
-    </div>
+    </>
   )
 }
diff --git a/example/next-storage/components/ProfileList.tsx b/example/next-storage/components/ProfileList.tsx
index de732b3d7..3b8210d58 100644
--- a/example/next-storage/components/ProfileList.tsx
+++ b/example/next-storage/components/ProfileList.tsx
@@ -10,7 +10,8 @@ export default function ProfileList() {
   const [profiles, setProfiles] = useState<Profile[]>([])
 
   useEffect(() => {
-    getPublicProfiles()
+    // getPublicProfiles()
+    getUserProfile()
 
     realtimeProfiles = supabase
       .from('profiles')
@@ -27,6 +28,23 @@ export default function ProfileList() {
     setProfiles([updated, ...otherProfiles])
   }
 
+  async function getUserProfile() {
+    const user = supabase.auth.user()
+    try {
+      const { data, error } = await supabase
+        .from('profiles')
+        .select('id, username, avatar_url, website, updated_at')
+        .eq('id', user.id)
+        .order('updated_at', { ascending: false })
+      if (error) {
+        throw error
+      }
+      setProfiles(data)
+    } catch (error) {
+      console.log('error', error.message)
+    }
+  }
+
   async function getPublicProfiles() {
     try {
       const { data, error } = await supabase
@@ -36,7 +54,6 @@ export default function ProfileList() {
       if (error) {
         throw error
       }
-      console.log('data', data)
       setProfiles(data)
     } catch (error) {
       console.log('error', error.message)
diff --git a/example/next-storage/pages/index.tsx b/example/next-storage/pages/index.tsx
index 9aaa9937e..a91f9a350 100644
--- a/example/next-storage/pages/index.tsx
+++ b/example/next-storage/pages/index.tsx
@@ -16,6 +16,10 @@ export default function Home() {
     })
   }, [])
 
+  const onSaveComplete = () => {
+    console.log('complete')
+  }
+
   return (
     <div
       style={{
@@ -29,12 +33,20 @@ export default function Home() {
       {!session ? (
         <Auth />
       ) : (
-        <div className="flex w-half" style={{ gap: 10 }}>
-          <div className="flex column w-half">
-            <Account key={session.user.id} session={session} />
-          </div>
-          <div className="flex column w-half" style={{ gap: 20 }}>
-            <ProfileList />
+        <div style={{ width: '50%' }}>
+          <p className="mainHeader">
+            Let's set up a simple profile
+            <span style={{ display: 'block', opacity: '50%', marginTop: '5px' }}>
+              And watch it update on the right
+            </span>
+          </p>
+          <div className="flex" style={{ gap: 10, width: '100%', justifyContent: 'space-between' }}>
+            <div className="flex column" style={{ width: '45%' }}>
+              <Account key={session.user.id} session={session} onSaveComplete={onSaveComplete} />
+            </div>
+            <div className="flex column" style={{ gap: 20, width: '45%' }}>
+              <ProfileList />
+            </div>
           </div>
         </div>
       )}
diff --git a/example/next-storage/public/loader.svg b/example/next-storage/public/loader.svg
new file mode 100644
index 000000000..e1a70c127
--- /dev/null
+++ b/example/next-storage/public/loader.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-loader"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>
\ No newline at end of file
diff --git a/example/next-storage/public/logo.png b/example/next-storage/public/logo.png
new file mode 100644
index 000000000..cba20968f
Binary files /dev/null and b/example/next-storage/public/logo.png differ
diff --git a/example/next-storage/styles/globals.css b/example/next-storage/styles/globals.css
index 34cf01b7e..da87b8b3c 100644
--- a/example/next-storage/styles/globals.css
+++ b/example/next-storage/styles/globals.css
@@ -2,7 +2,7 @@ html,
 body {
   --custom-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
     Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  --custom-bg-color: #1f1f1f;
+  --custom-bg-color: #101010;
   --custom-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.8);
   --custom-color: #fff;
   --custom-color-brand: #24b47e;
@@ -136,3 +136,178 @@ button.primary,
   transform: translateY(-50%);
   text-align: center;
 }
+
+.footer {
+  position: absolute;
+  bottom: 2rem;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 200px;
+  font-size: 0.8rem;
+  font-weight: 300;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.footer > img {
+  height: 20px;
+  margin-left: 10px;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.mainHeader {
+  width: 100%;
+  font-size: 1.3rem;
+  margin-bottom: 20px;
+}
+
+.avatarPlaceholder {
+  border: var(--custom-border);
+  border-radius: var(--custom-border-radius);
+  width: 40px;
+  height: 40px;
+  background-color: rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Auth */
+
+.authContainer {
+  display: flex;
+  /* flex-direction: column; */
+  align-items: center;
+  justify-items: center;
+}
+
+.authContainer > .authTitle {
+  width: 22rem;
+  margin-right: 40px;
+}
+
+.authContainer > .authTitle > .header {
+  font-weight: 400;
+}
+
+.authContainer > .authTitle > .description {
+  opacity: 50%;
+  font-weight: 300;
+  line-height: 1.6em;
+}
+
+.authWidget {
+  background-color: #181818;
+  border: 1px solid #2a2a2a;
+  padding: 30px 30px;
+  border-radius: 5px;
+  width: 28rem;
+}
+
+.authWidget > .description {
+  margin: 0;
+  font-size: 0.9rem;
+}
+
+.authWidget > .inputField {
+  border: none;
+  padding: 10px 10px;
+}
+
+.authWidget > .button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: #444444;
+  text-transform: none !important;
+  transition: all 0.2s ease;
+}
+
+.authWidget > .button:hover {
+  background-color: #2a2a2a;
+}
+
+.authWidget > .button > .loader {
+  width: 17px;
+  animation: spin 1s linear infinite;
+  filter: invert(1);
+}
+
+/* Account */
+
+.account {
+  width: 100%;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.account > * > .avatarField {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30px;
+}
+
+.account > * > .avatarField > .avatarContainer {
+  margin-right: 20px;
+}
+
+/* Profile Card */
+
+.profileCard {
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #2a2a2a;
+  padding: 30px;
+}
+
+.profileCard > .avatarContainer {
+  border-radius: 50%;
+  overflow: hidden;
+  margin-bottom: 30px;
+}
+
+.profileCard > .avatar {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.profileCard > .userInfo {
+  width: 100%;
+  font-weight: 300;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.profileCard > .userInfo > p {
+  margin: 0;
+}
+
+.profileCard > .userInfo > .username {
+  font-size: 1.3rem;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+
+.profileCard > .userInfo > .website {
+  font-size: 0.9rem;
+  margin-bottom: 10px;
+  color: var(--custom-color-brand);
+  text-decoration: none;
+}