diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx
index 3cea1cca..72518faa 100644
--- a/components/AccountModal/index.tsx
+++ b/components/AccountModal/index.tsx
@@ -159,8 +159,10 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
             const user = response.data
 
             const cookieObj = {
-              picture: user.avatar.picture,
-              element: user.avatar.element,
+              avatar: {
+                picture: user.avatar.picture,
+                element: user.avatar.element,
+              },
               gender: user.gender,
               language: user.language,
               theme: user.theme,
@@ -173,14 +175,18 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
             accountState.account.user = {
               id: user.id,
               username: user.username,
-              picture: user.avatar.picture,
-              element: user.avatar.element,
+              granblueId: '',
+              avatar: {
+                picture: user.avatar.picture,
+                element: user.avatar.element,
+              },
               language: user.language,
               theme: user.theme,
               gender: user.gender,
             }
 
             setOpen(false)
+            if (props.onOpenChange) props.onOpenChange(false)
             changeLanguage(router, user.language)
           })
       }
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 40b32fe9..de1c5810 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -197,10 +197,10 @@ const Header = () => {
       image = (
         <img
           alt={user.username}
-          className={`profile ${user.element}`}
-          srcSet={`/profile/${user.picture}.png, 
-                      /profile/${user.picture}@2x.png 2x`}
-          src={`/profile/${user.picture}.png`}
+          className={`profile ${user.avatar.element}`}
+          srcSet={`/profile/${user.avatar.picture}.png, 
+                      /profile/${user.avatar.picture}@2x.png 2x`}
+          src={`/profile/${user.avatar.picture}.png`}
         />
       )
     } else {
@@ -262,7 +262,7 @@ const Header = () => {
         <AccountModal
           open={settingsModalOpen}
           username={user.username}
-          picture={user.picture}
+          picture={user.avatar.picture}
           gender={user.gender}
           language={user.language}
           theme={user.theme}
diff --git a/components/LoginModal/index.tsx b/components/LoginModal/index.tsx
index f42e1ed3..66fd34cf 100644
--- a/components/LoginModal/index.tsx
+++ b/components/LoginModal/index.tsx
@@ -161,8 +161,10 @@ const LoginModal = (props: Props) => {
     setCookie(
       'user',
       {
-        picture: user.avatar.picture,
-        element: user.avatar.element,
+        avatar: {
+          picture: user.avatar.picture,
+          element: user.avatar.element,
+        },
         language: user.language,
         gender: user.gender,
         theme: user.theme,
@@ -174,8 +176,11 @@ const LoginModal = (props: Props) => {
     accountState.account.user = {
       id: user.id,
       username: user.username,
-      picture: user.avatar.picture,
-      element: user.avatar.element,
+      granblueId: '',
+      avatar: {
+        picture: user.avatar.picture,
+        element: user.avatar.element,
+      },
       gender: user.gender,
       language: user.language,
       theme: user.theme,
diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx
index c67bb12e..f8cea3f0 100644
--- a/components/SignupModal/index.tsx
+++ b/components/SignupModal/index.tsx
@@ -121,8 +121,10 @@ const SignupModal = (props: Props) => {
     setCookie(
       'user',
       {
-        picture: user.avatar.picture,
-        element: user.avatar.element,
+        avatar: {
+          picture: user.avatar.picture,
+          element: user.avatar.element,
+        },
         language: user.language,
         gender: user.gender,
         theme: user.theme,
@@ -134,8 +136,11 @@ const SignupModal = (props: Props) => {
     accountState.account.user = {
       id: user.id,
       username: user.username,
-      picture: user.avatar.picture,
-      element: user.avatar.element,
+      granblueId: '',
+      avatar: {
+        picture: user.avatar.picture,
+        element: user.avatar.element,
+      },
       gender: user.gender,
       language: user.language,
       theme: user.theme,
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 498851d9..cfc1806f 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -32,8 +32,11 @@ function MyApp({ Component, pageProps }: AppProps) {
       accountState.account.user = {
         id: cookieData.account.userId,
         username: cookieData.account.username,
-        picture: cookieData.user.picture,
-        element: cookieData.user.element,
+        granblueId: '',
+        avatar: {
+          picture: cookieData.user.avatar.picture,
+          element: cookieData.user.avatar.element,
+        },
         gender: cookieData.user.gender,
         language: cookieData.user.language,
         theme: cookieData.user.theme,
diff --git a/types/User.d.ts b/types/User.d.ts
index fdfcedd3..b79e76f2 100644
--- a/types/User.d.ts
+++ b/types/User.d.ts
@@ -1,11 +1,10 @@
 interface User {
   id: string
   username: string
-  granblueId: number
+  granblueId: string
   avatar: {
     picture: string
     element: string
   }
   gender: number
-  private: boolean
 }
diff --git a/utils/accountState.tsx b/utils/accountState.tsx
index fe2d3249..ffe3cb60 100644
--- a/utils/accountState.tsx
+++ b/utils/accountState.tsx
@@ -2,9 +2,12 @@ import { proxy } from 'valtio'
 
 export type UserState = {
   id: string
+  granblueId: string
   username: string
-  picture: string
-  element: string
+  avatar: {
+    picture: string
+    element: string
+  }
   gender: number
   language: string
   theme: string