diff --git a/qwilight-fe/src/avatar/AvatarView.tsx b/qwilight-fe/src/avatar/AvatarView.tsx
index 7af85fd..e511492 100644
--- a/qwilight-fe/src/avatar/AvatarView.tsx
+++ b/qwilight-fe/src/avatar/AvatarView.tsx
@@ -9,8 +9,13 @@
   Input,
   ListGroup,
   ListGroupItem,
+  Nav,
+  NavItem,
+  NavLink,
   Progress,
   Row,
+  TabContent,
+  TabPane,
 } from "reactstrap";
 import { useTo } from "taehui-ts/fe-utility";
 
@@ -74,6 +79,7 @@
   } = useAvatarStore();
   const { siteAvatarID, isSignedIn, setSignInOpened } = useSiteStore();
 
+  const [tabPosition, setTabPosition] = useState(0);
   const [isLoading, setLoading] = useState(false);
 
   const to = useTo();
@@ -104,27 +110,59 @@
 
   useEffect(() => {
     if (avatarID) {
-      switch (favoritesTabPosition) {
+      switch (tabPosition) {
         case 0:
-          getAvatarFavorites5K(t);
+          switch (favoritesTabPosition) {
+            case 0:
+              getAvatarFavorites5K(t);
+              break;
+            case 1:
+              getAvatarFavorites7K(t);
+              break;
+            case 2:
+              getAvatarFavorites9K(t);
+              break;
+            case 3:
+              getAvatarFavorites10K(t);
+              break;
+            case 4:
+              getAvatarFavorites14K(t);
+              break;
+            case 5:
+              getAvatarFavorites24K(t);
+              break;
+            case 6:
+              getAvatarFavorites48K(t);
+              break;
+          }
           break;
         case 1:
-          getAvatarFavorites7K(t);
+          switch (lastsTabPosition) {
+            case 0:
+              getAvatarLasts5K();
+              break;
+            case 1:
+              getAvatarLasts7K();
+              break;
+            case 2:
+              getAvatarLasts9K();
+              break;
+            case 3:
+              getAvatarLasts10K();
+              break;
+            case 4:
+              getAvatarLasts14K();
+              break;
+            case 5:
+              getAvatarLasts24K();
+              break;
+            case 6:
+              getAvatarLasts48K();
+              break;
+          }
           break;
         case 2:
-          getAvatarFavorites9K(t);
-          break;
-        case 3:
-          getAvatarFavorites10K(t);
-          break;
-        case 4:
-          getAvatarFavorites14K(t);
-          break;
-        case 5:
-          getAvatarFavorites24K(t);
-          break;
-        case 6:
-          getAvatarFavorites48K(t);
+          getAvatarWwwLevels();
           break;
       }
     }
@@ -138,38 +176,6 @@
     getAvatarFavorites5K,
     getAvatarFavorites7K,
     getAvatarFavorites9K,
-    t,
-  ]);
-
-  useEffect(() => {
-    if (avatarID) {
-      switch (lastsTabPosition) {
-        case 0:
-          getAvatarLasts5K();
-          break;
-        case 1:
-          getAvatarLasts7K();
-          break;
-        case 2:
-          getAvatarLasts9K();
-          break;
-        case 3:
-          getAvatarLasts10K();
-          break;
-        case 4:
-          getAvatarLasts14K();
-          break;
-        case 5:
-          getAvatarLasts24K();
-          break;
-        case 6:
-          getAvatarLasts48K();
-          break;
-      }
-    }
-  }, [
-    avatarID,
-    lastsTabPosition,
     getAvatarLasts10K,
     getAvatarLasts14K,
     getAvatarLasts24K,
@@ -177,17 +183,23 @@
     getAvatarLasts5K,
     getAvatarLasts7K,
     getAvatarLasts9K,
+    getAvatarWwwLevels,
+    lastsTabPosition,
     t,
+    tabPosition,
   ]);
 
-  useEffect(() => {
-    getAvatarWwwLevels();
-  }, [getAvatarWwwLevels]);
-
   const onWant = () => {
     to(`/qwilight/avatar/${input}`);
   };
 
+  const getProperties = (i: number) => ({
+    className: tabPosition === i ? "active route" : "route",
+    onClick: () => {
+      setTabPosition(i);
+    },
+  });
+
   return (
     <>
       <Row className="g-0">
@@ -378,21 +390,32 @@
                   <QuitStatusValues />
                 </Col>
               </Row>
-              <Row className="g-0">
-                <Col className="m-1">
+              <Nav tabs>
+                <NavItem>
+                  <NavLink {...getProperties(0)}>
+                    {t("avatarFavoritesText")}
+                  </NavLink>
+                </NavItem>
+                <NavItem>
+                  <NavLink {...getProperties(1)}>
+                    {t("avatarLastsText")}
+                  </NavLink>
+                </NavItem>
+                <NavItem>
+                  <NavLink {...getProperties(2)}>{t("wwwLevel")}</NavLink>
+                </NavItem>
+              </Nav>
+              <TabContent activeTab={tabPosition}>
+                <TabPane tabId={0}>
                   <FavoritesView />
-                </Col>
-              </Row>
-              <Row className="g-0">
-                <Col className="m-1">
+                </TabPane>
+                <TabPane tabId={1}>
                   <LastsView />
-                </Col>
-              </Row>
-              <Row className="g-0">
-                <Col className="m-1">
+                </TabPane>
+                <TabPane tabId={2}>
                   <WwwLevelsView />
-                </Col>
-              </Row>
+                </TabPane>
+              </TabContent>
             </>
           )}
         </>
diff --git a/qwilight-fe/src/avatar/FavoritesView.tsx b/qwilight-fe/src/avatar/FavoritesView.tsx
index deea760..7b19b92 100644
--- a/qwilight-fe/src/avatar/FavoritesView.tsx
+++ b/qwilight-fe/src/avatar/FavoritesView.tsx
@@ -1,7 +1,6 @@
 import { observer } from "mobx-react-lite";
 import { useTranslation } from "react-i18next";
 import {
-  Badge,
   ListGroup,
   Nav,
   NavItem,
@@ -12,7 +11,6 @@
 
 import { useAvatarStore } from "src/Stores";
 import NoteItem from "src/note/NoteItem";
-import { FC, PropsWithChildren, useCallback } from "react";
 import { NoteLoading } from "src/Loading";
 
 export default observer(() => {
@@ -44,18 +42,6 @@
     },
   });
 
-  const FavoriteView = useCallback<FC<PropsWithChildren>>(
-    ({ children }) => {
-      return (
-        <ListGroup>
-          <Badge color="primary">{t("avatarFavoritesText")}</Badge>
-          {children}
-        </ListGroup>
-      );
-    },
-    [t],
-  );
-
   return (
     <>
       <Nav tabs>
@@ -83,7 +69,7 @@
       </Nav>
       <TabContent activeTab={favoritesTabPosition}>
         <TabPane tabId={0}>
-          <FavoriteView>
+          <ListGroup>
             {isFavorites5KLoading ? (
               <NoteLoading loadingCount={10} />
             ) : (
@@ -111,10 +97,10 @@
                 ),
               )
             )}
-          </FavoriteView>
+          </ListGroup>
         </TabPane>
         <TabPane tabId={1}>
-          <FavoriteView>
+          <ListGroup>
             {isFavorites7KLoading ? (
               <NoteLoading loadingCount={10} />
             ) : (
@@ -142,10 +128,10 @@
                 ),
               )
             )}
-          </FavoriteView>
+          </ListGroup>
         </TabPane>
         <TabPane tabId={2}>
-          <FavoriteView>
+          <ListGroup>
             {isFavorites9KLoading ? (
               <NoteLoading loadingCount={10} />
             ) : (
@@ -173,10 +159,10 @@
                 ),
               )
             )}
-          </FavoriteView>
+          </ListGroup>
         </TabPane>
         <TabPane tabId={3}>
-          <FavoriteView>
+          <ListGroup>
             {isFavorites10KLoading ? (
               <NoteLoading loadingCount={10} />
             ) : (
@@ -204,10 +190,10 @@
                 ),
               )
             )}
-          </FavoriteView>
+          </ListGroup>
         </TabPane>
         <TabPane tabId={4}>
-          <FavoriteView>
+          <ListGroup>
             {isFavorites14KLoading ? (
               <NoteLoading loadingCount={10} />
             ) : (
@@ -235,10 +221,10 @@
                 ),
               )
             )}
-          </FavoriteView>
+          </ListGroup>
         </TabPane>
         <TabPane tabId={5}>
-          <FavoriteView>
+          <ListGroup>
             {isFavorites24KLoading ? (
               <NoteLoading loadingCount={10} />
             ) : (
@@ -266,10 +252,10 @@
                 ),
               )
             )}
-          </FavoriteView>
+          </ListGroup>
         </TabPane>
         <TabPane tabId={6}>
-          <FavoriteView>
+          <ListGroup>
             {isFavorites48KLoading ? (
               <NoteLoading loadingCount={10} />
             ) : (
@@ -297,7 +283,7 @@
                 ),
               )
             )}
-          </FavoriteView>
+          </ListGroup>
         </TabPane>
       </TabContent>
     </>
diff --git a/qwilight-fe/src/avatar/LastsView.tsx b/qwilight-fe/src/avatar/LastsView.tsx
index 4ad6954..f21363b 100644
--- a/qwilight-fe/src/avatar/LastsView.tsx
+++ b/qwilight-fe/src/avatar/LastsView.tsx
@@ -1,7 +1,6 @@
 import { observer } from "mobx-react-lite";
 import { useTranslation } from "react-i18next";
 import {
-  Badge,
   ListGroup,
   Nav,
   NavItem,
@@ -13,7 +12,6 @@
 import { useAvatarStore } from "src/Stores";
 import NoteItem from "src/note/NoteItem";
 import { NoteLoading } from "src/Loading";
-import { FC, PropsWithChildren, useCallback } from "react";
 
 export default observer(() => {
   const {
@@ -45,18 +43,6 @@
     },
   });
 
-  const LastView = useCallback<FC<PropsWithChildren>>(
-    ({ children }) => {
-      return (
-        <ListGroup>
-          <Badge color="primary">{t("avatarLastsText")}</Badge>
-          {children}
-        </ListGroup>
-      );
-    },
-    [t],
-  );
-
   return (
     <>
       <Nav tabs>
@@ -84,7 +70,7 @@
       </Nav>
       <TabContent activeTab={lastsTabPosition}>
         <TabPane tabId={0}>
-          <LastView>
+          <ListGroup>
             {isLasts5KLoading ? (
               <NoteLoading loadingCount={10} />
             ) : (
@@ -112,10 +98,10 @@
                 ),
               )
             )}
-          </LastView>
+          </ListGroup>
         </TabPane>
         <TabPane tabId={1}>
-          <LastView>
+          <ListGroup>
             {isLasts7KLoading ? (
               <NoteLoading loadingCount={10} />
             ) : (
@@ -143,10 +129,10 @@
                 ),
               )
             )}
-          </LastView>
+          </ListGroup>
         </TabPane>
         <TabPane tabId={2}>
-          <LastView>
+          <ListGroup>
             {isLasts9KLoading ? (
               <NoteLoading loadingCount={10} />
             ) : (
@@ -174,10 +160,10 @@
                 ),
               )
             )}
-          </LastView>
+          </ListGroup>
         </TabPane>
         <TabPane tabId={3}>
-          <LastView>
+          <ListGroup>
             {isLasts10KLoading ? (
               <NoteLoading loadingCount={10} />
             ) : (
@@ -205,10 +191,10 @@
                 ),
               )
             )}
-          </LastView>
+          </ListGroup>
         </TabPane>
         <TabPane tabId={4}>
-          <LastView>
+          <ListGroup>
             {isLasts14KLoading ? (
               <NoteLoading loadingCount={10} />
             ) : (
@@ -236,10 +222,10 @@
                 ),
               )
             )}
-          </LastView>
+          </ListGroup>
         </TabPane>
         <TabPane tabId={5}>
-          <LastView>
+          <ListGroup>
             {isLasts24KLoading ? (
               <NoteLoading loadingCount={10} />
             ) : (
@@ -267,10 +253,10 @@
                 ),
               )
             )}
-          </LastView>
+          </ListGroup>
         </TabPane>
         <TabPane tabId={6}>
-          <LastView>
+          <ListGroup>
             {isLasts48KLoading ? (
               <NoteLoading loadingCount={10} />
             ) : (
@@ -298,7 +284,7 @@
                 ),
               )
             )}
-          </LastView>
+          </ListGroup>
         </TabPane>
       </TabContent>
     </>
diff --git a/qwilight-fe/src/avatar/WwwLevelItem.tsx b/qwilight-fe/src/avatar/WwwLevelItem.tsx
index 1d637a0..7186c31 100644
--- a/qwilight-fe/src/avatar/WwwLevelItem.tsx
+++ b/qwilight-fe/src/avatar/WwwLevelItem.tsx
@@ -40,7 +40,7 @@
         <Col className="m-1" xs="auto">
           <span>{title}</span> {isLoading && <Spinner size="sm" />}
           <br />
-          <span className="fittedText">{toDate(date)}</span>
+          {date && <span className="fittedText">{toDate(date)}</span>}
         </Col>
       </Row>
       <Collapse isOpen={isWwwLevelDataOpened}>
diff --git a/qwilight-fe/src/avatar/WwwLevelsView.tsx b/qwilight-fe/src/avatar/WwwLevelsView.tsx
index 83e81e1..f4437ae 100644
--- a/qwilight-fe/src/avatar/WwwLevelsView.tsx
+++ b/qwilight-fe/src/avatar/WwwLevelsView.tsx
@@ -1,17 +1,14 @@
 import { observer } from "mobx-react-lite";
-import { useTranslation } from "react-i18next";
-import { Badge, ListGroup } from "reactstrap";
+import { ListGroup } from "reactstrap";
 import WwwLevelItem from "src/avatar/WwwLevelItem";
 import { useAvatarStore } from "src/Stores";
 import { AvatarWwwLevelLoading } from "src/Loading";
 
 export default observer(() => {
   const { wwwLevels, isWwwLevelLoading } = useAvatarStore();
-  const { t } = useTranslation();
 
   return (
     <ListGroup>
-      <Badge color="success">{t("wwwLevel")}</Badge>
       {isWwwLevelLoading ? (
         <AvatarWwwLevelLoading loadingCount={1} />
       ) : (