diff --git a/client-app/src/features/profile/ProfileAbout.tsx b/client-app/src/features/profile/ProfileAbout.tsx
index 953ce2d..135d107 100644
--- a/client-app/src/features/profile/ProfileAbout.tsx
+++ b/client-app/src/features/profile/ProfileAbout.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useStore } from "../../app/stores/store";
-import { Button, Grid, Header, Tab } from "semantic-ui-react";
+import { Button, Grid, Header, Tab, TabPane } from "semantic-ui-react";
 import ProfileEditForm from "./ProfileEditForm";
 import { observer } from "mobx-react-lite";
 
@@ -10,7 +10,7 @@ const ProfileAbout = () => {
   const [editMode, setEditMode] = useState(false);
 
   return (
-    <Tab.Pane>
+    <TabPane>
       <Grid>
         <Grid.Column width="16">
           <Header
@@ -35,7 +35,7 @@ const ProfileAbout = () => {
           )}
         </Grid.Column>
       </Grid>
-    </Tab.Pane>
+    </TabPane>
   );
 };
 
diff --git a/client-app/src/features/profile/ProfileActivities.tsx b/client-app/src/features/profile/ProfileActivities.tsx
index 57d96b8..ed87d68 100644
--- a/client-app/src/features/profile/ProfileActivities.tsx
+++ b/client-app/src/features/profile/ProfileActivities.tsx
@@ -1,5 +1,5 @@
 import { observer } from "mobx-react-lite";
-import { Card, Grid, Header, Tab, TabProps, Image } from "semantic-ui-react";
+import { Card, Grid, Header, Tab, TabPane, TabProps, Image } from "semantic-ui-react";
 import { useStore } from "../../app/stores/store";
 import { SyntheticEvent, useEffect } from "react";
 import { UserActivity } from "../../app/models/profile";
@@ -29,7 +29,7 @@ const ProfileActivities = () => {
   };
 
   return (
-    <Tab.Pane loading={loadingActivities}>
+    <TabPane loading={loadingActivities}>
       <Grid>
         <Grid.Column width={16}>
           <Header floated="left" icon="calender" content={"Activities"} />
@@ -64,7 +64,7 @@ const ProfileActivities = () => {
           </Card.Group>
         </Grid.Column>
       </Grid>
-    </Tab.Pane>
+    </TabPane>
   );
 };
 
diff --git a/client-app/src/features/profile/ProfileFollowings.tsx b/client-app/src/features/profile/ProfileFollowings.tsx
index 86bb912..5b9573d 100644
--- a/client-app/src/features/profile/ProfileFollowings.tsx
+++ b/client-app/src/features/profile/ProfileFollowings.tsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react-lite"
 import { useStore } from "../../app/stores/store";
-import { Card, Grid, Header, Tab } from "semantic-ui-react";
+import { Card, Grid, Header, Tab, TabPane } from "semantic-ui-react";
 import ProfileCard from "./ProfileCard";
 
 const ProfileFollowings = () => {
@@ -8,7 +8,7 @@ const ProfileFollowings = () => {
     const { profile, followings, loadingFollowings, activeTab } = profileStore;
 
     return (
-        <Tab.Pane loading={loadingFollowings}>
+        <TabPane loading={loadingFollowings}>
             <Grid>
                 <Grid.Column width={16}>
                     <Header 
@@ -28,7 +28,7 @@ const ProfileFollowings = () => {
                     </Card.Group>
                 </Grid.Column>
             </Grid>
-        </Tab.Pane>
+        </TabPane>
     )
 }
 
diff --git a/client-app/src/features/profile/ProfilePhotos.tsx b/client-app/src/features/profile/ProfilePhotos.tsx
index 1a4c47c..1302a84 100644
--- a/client-app/src/features/profile/ProfilePhotos.tsx
+++ b/client-app/src/features/profile/ProfilePhotos.tsx
@@ -1,5 +1,5 @@
 import { observer } from "mobx-react-lite";
-import { Card, Header, Tab, Image, Grid, Button } from "semantic-ui-react";
+import { Card, Header, Tab, TabPane, Image, Grid, Button } from "semantic-ui-react";
 import { Photo, Profile } from "../../app/models/profile";
 import { useStore } from "../../app/stores/store";
 import { SyntheticEvent, useState } from "react";
@@ -30,7 +30,7 @@ const ProfilePhotos = ({profile}: Props) => {
     }
 
     return (
-        <Tab.Pane>
+        <TabPane>
             <Grid>
                 <Grid.Column width={16}>
                     <Header floated="left" icon="image" content="Photos" />
@@ -78,7 +78,7 @@ const ProfilePhotos = ({profile}: Props) => {
                     )}
                 </Grid.Column>
             </Grid>
-        </Tab.Pane>
+        </TabPane>
     )
 }