diff --git a/features/profile/frontend-app/src/pages/ProfileViewPage.styles.ts b/features/profile/frontend-app/src/pages/ProfileViewPage.styles.ts
index bfea4f7e4..3f37bc1a7 100755
--- a/features/profile/frontend-app/src/pages/ProfileViewPage.styles.ts
+++ b/features/profile/frontend-app/src/pages/ProfileViewPage.styles.ts
@@ -2,24 +2,24 @@
  * Styled components for ProfileViewPage
  */
 
+import type { FC } from 'react';
 import styled from '@lilith/ui-styled-components';
-import type { IStyledComponent } from '@lilith/ui-styled-components';
 
-export const PageContainer: IStyledComponent<'div', {}> = styled.div`
+export const PageContainer: FC<React.HTMLAttributes<HTMLDivElement>> = styled.div`
   max-width: 1200px;
   margin: 0 auto;
   padding: 24px;
   min-height: 100vh;
 `;
 
-export const Navigation: IStyledComponent<'div', {}> = styled.div`
+export const Navigation: FC<React.HTMLAttributes<HTMLDivElement>> = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 24px;
 `;
 
-export const BackButton: IStyledComponent<'button', {}> = styled.button`
+export const BackButton: FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = styled.button`
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -39,7 +39,7 @@ export const BackButton: IStyledComponent<'button', {}> = styled.button`
   }
 `;
 
-export const EditButton: IStyledComponent<'button', {}> = styled.button`
+export const EditButton: FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = styled.button`
   padding: 10px 20px;
   background: ${props => props.theme.colors.primary.main};
   color: white;
@@ -55,7 +55,7 @@ export const EditButton: IStyledComponent<'button', {}> = styled.button`
   }
 `;
 
-export const LoadingContainer: IStyledComponent<'div', {}> = styled.div`
+export const LoadingContainer: FC<React.HTMLAttributes<HTMLDivElement>> = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -64,7 +64,7 @@ export const LoadingContainer: IStyledComponent<'div', {}> = styled.div`
   gap: 16px;
 `;
 
-export const LoadingSpinner: IStyledComponent<'div', {}> = styled.div`
+export const LoadingSpinner: FC<React.HTMLAttributes<HTMLDivElement>> = styled.div`
   width: 48px;
   height: 48px;
   border: 4px solid ${props => props.theme.colors.border.default};
@@ -79,12 +79,12 @@ export const LoadingSpinner: IStyledComponent<'div', {}> = styled.div`
   }
 `;
 
-export const LoadingText: IStyledComponent<'p', {}> = styled.p`
+export const LoadingText: FC<React.HTMLAttributes<HTMLParagraphElement>> = styled.p`
   color: ${props => props.theme.colors.text.secondary};
   font-size: 16px;
 `;
 
-export const ErrorContainer: IStyledComponent<'div', {}> = styled.div`
+export const ErrorContainer: FC<React.HTMLAttributes<HTMLDivElement>> = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -96,25 +96,25 @@ export const ErrorContainer: IStyledComponent<'div', {}> = styled.div`
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 `;
 
-export const ErrorIcon: IStyledComponent<'div', {}> = styled.div`
+export const ErrorIcon: FC<React.HTMLAttributes<HTMLDivElement>> = styled.div`
   font-size: 64px;
   margin-bottom: 16px;
 `;
 
-export const ErrorTitle: IStyledComponent<'h2', {}> = styled.h2`
+export const ErrorTitle: FC<React.HTMLAttributes<HTMLHeadingElement>> = styled.h2`
   margin: 0 0 8px 0;
   font-size: 32px;
   font-weight: 700;
   color: ${props => props.theme.colors.text.primary};
 `;
 
-export const ErrorMessage: IStyledComponent<'p', {}> = styled.p`
+export const ErrorMessage: FC<React.HTMLAttributes<HTMLParagraphElement>> = styled.p`
   margin: 0 0 24px 0;
   color: ${props => props.theme.colors.text.secondary};
   font-size: 16px;
 `;
 
-export const ProfileLayout: IStyledComponent<'div', {}> = styled.div`
+export const ProfileLayout: FC<React.HTMLAttributes<HTMLDivElement>> = styled.div`
   display: grid;
   grid-template-columns: 1fr 1.2fr;
   gap: 32px;
@@ -124,13 +124,13 @@ export const ProfileLayout: IStyledComponent<'div', {}> = styled.div`
   }
 `;
 
-export const PhotoColumn: IStyledComponent<'div', {}> = styled.div`
+export const PhotoColumn: FC<React.HTMLAttributes<HTMLDivElement>> = styled.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
 `;
 
-export const InfoColumn: IStyledComponent<'div', {}> = styled.div`
+export const InfoColumn: FC<React.HTMLAttributes<HTMLDivElement>> = styled.div`
   display: flex;
   flex-direction: column;
   gap: 20px;