diff --git a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..86e64707a1f07f4ce40b5523c2585bfe321e9887
--- /dev/null
+++ b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx
@@ -0,0 +1,82 @@
+import * as React from "react";
+import { Stack, Paper } from "@mui/material";
+import {
+  FileCard,
+  ExtFile,
+  FullScreen,
+  ImagePreview,
+  VideoPreview,
+  FileInputButton,
+  Avatar,
+} from "../../../files-ui";
+import AnchorToTab from "../../util-components/AnchorToTab";
+import TypeHighlight from "../../typeHighlight/TypeHighlight";
+
+interface ExtraComponentsMainPageProps {
+  darkMode?: boolean;
+}
+const ExtraComponentsMainPageAvatar: React.FC<ExtraComponentsMainPageProps> = (
+  props: ExtraComponentsMainPageProps
+) => {
+  const { darkMode } = props;
+  const [isUloading, setIsUploading] = React.useState<boolean>(false);
+
+  const [avatarSrc, setAvatarSrc] = React.useState<string | undefined | File>(
+    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaKgRXvIBtfmfJ49rSmVbPLTgRqPPYjMA_94o0KD4WtHK55Oh_MYbVF8JmPqyddweUx8Y&usqp=CAU"
+  );
+
+  const handleChange = async (file: File) => {
+    setAvatarSrc(file);
+  };
+  return (
+    <Paper
+      variant="outlined"
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "20px 0",
+        boxSizing: "border-box",
+        backgroundColor: darkMode ? "#121212" : "rgba(0, 0, 0, 0.06)",
+        height: "100%",
+      }}
+    >
+      <TypeHighlight>
+        <AnchorToTab href="/components/avatar">
+          <h3 style={{ margin: 0 }}>{"<Avatar/>"}</h3>
+        </AnchorToTab>
+      </TypeHighlight>
+      <Stack
+        direction={"column"}
+        spacing={2}
+        alignItems="center"
+        justifyContent={"space-evenly"}
+        sx={{
+          flexWrap: "wrap",
+          flexGrow: 1,
+        }}
+      >
+        <Avatar
+          src={avatarSrc}
+          onChange={handleChange}
+          isUloading={isUloading}
+        />
+        <Avatar
+          src={avatarSrc}
+          smart={true}
+          onChange={handleChange}
+          isUloading={isUloading}
+        />
+      </Stack>
+    </Paper>
+  );
+};
+export default ExtraComponentsMainPageAvatar;
+
+const sampleFileProps: ExtFile = {
+  id: "fileId",
+  size: 28 * 1024 * 1024,
+  type: "text/plain",
+  name: "file created from props.jsx",
+};
diff --git a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton.tsx b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton.tsx
index 5fe683455d6e9eff59915023e772bd385b3d8368..aced7d66e5477867f3bd16d05b9285c94e187272 100644
--- a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton.tsx
+++ b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton.tsx
@@ -59,11 +59,11 @@ const ExtraComponentsMainPageInputButton: React.FC<
         }}
       >
         {value ? (
-          <FileCard {...value} onDelete={removeFile} info />
+          <FileCard {...value} onDelete={removeFile} info preview darkMode={darkMode}/>
         ) : (
           <FileInputButton value={value ? [value] : []} onChange={updateFile} />
         )}
-        <FileCard {...sampleFileProps} info />
+        <FileCard {...sampleFileProps} info darkMode={darkMode}/>
       </Stack>
     </Paper>
   );
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index 9e8d3b4e1aebf605ded2ad004fb85a403fa7b1a6..d726bf64b7cdb495c7db685225670174d91d72dc 100644
--- a/src/pages/MainPage.jsx
+++ b/src/pages/MainPage.jsx
@@ -12,6 +12,7 @@ import FileMosaicImageVideoPreviews from "../components/MainPage/MainRight/FileM
 import { Divider } from "@mui/material";
 import ExtraComponentsMainPage from "../components/MainPage/SecondaryRight/ExtraComponentsMainPage";
 import ExtraComponentsMainPageInputButton from "../components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton";
+import ExtraComponentsMainPageAvatar from "../components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar";
 
 const MainPage = ({ darkMode }) => {
   const [darkModeOn, setDarkModeOn] = React.useState(false);
@@ -90,7 +91,7 @@ const MainPage = ({ darkMode }) => {
               <ExtraComponentsMainPageInputButton darkMode={darkModeOn} />
             </div>
             <div className="secondary-item">
-              <ExtraComponentsMainPage darkMode={darkModeOn} />
+              <ExtraComponentsMainPageAvatar darkMode={darkModeOn} />
             </div>
           </div>
         </div>