diff --git a/frontend/public/images/sloth-profile.svg b/frontend/public/images/sloth-profile.svg
new file mode 100644
index 0000000..1677c15
--- /dev/null
+++ b/frontend/public/images/sloth-profile.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/app/components/Header/Header.js b/frontend/src/app/components/Header/Header.js
index 1c171c7..02d4cd3 100644
--- a/frontend/src/app/components/Header/Header.js
+++ b/frontend/src/app/components/Header/Header.js
@@ -1,12 +1,25 @@
import styles from "./Header.module.css";
import SettingsIcon from '@mui/icons-material/Settings';
+import Image from "next/image";
+import Link from "next/link";
export default function Header({title}) {
+ const pbDimenstions = 30
+
return (
-
-
-
+
+
+
+
+
+
{title}
);
diff --git a/frontend/src/app/components/Header/Header.module.css b/frontend/src/app/components/Header/Header.module.css
index ab781bf..e81c3d3 100644
--- a/frontend/src/app/components/Header/Header.module.css
+++ b/frontend/src/app/components/Header/Header.module.css
@@ -1,6 +1,7 @@
.header {
display: flex;
justify-content: space-between;
+ align-items: center;
background: var(--gradient_down);
padding: 3rem 2rem;
}
@@ -9,6 +10,21 @@
display: flex;
}
+.profile {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: .3em;
+ padding-right: .2em;
+ background: var(--color_lightPurple);
+ height: 30px;
+ border-radius: 15px;
+}
+
+.profile__img {
+ transform: translateX(-1px);
+}
+
.title {
text-transform: uppercase;
color: var(--color_yellow);