From 55efde580ca63f4667517799e254ebbb811d4454 Mon Sep 17 00:00:00 2001
From: "luisa.bellitto" <luisa.bellitto@bluehands.de>
Date: Wed, 18 Jun 2025 16:56:27 +0200
Subject: [PATCH] basic design finished

---
 code/frontend/src/Bio.tsx               | 104 ++-----
 code/frontend/src/Profile.tsx           | 109 +++++--
 code/frontend/src/QuiltedImageList.tsx  | 379 ++++++++++++------------
 code/frontend/src/bio.css               |  44 +++
 code/frontend/src/components/header.css |   6 +
 code/frontend/src/profile.css           | 110 +++++--
 code/frontend/src/quiltedImageList.css  |  26 +-
 7 files changed, 458 insertions(+), 320 deletions(-)
 create mode 100644 code/frontend/src/bio.css

diff --git a/code/frontend/src/Bio.tsx b/code/frontend/src/Bio.tsx
index be6a137..7b9c450 100644
--- a/code/frontend/src/Bio.tsx
+++ b/code/frontend/src/Bio.tsx
@@ -1,84 +1,30 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
+import * as React from "react";
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import StyledEngineProvider from "@mui/styled-engine/StyledEngineProvider";
+import { useFormControl } from '@mui/material/FormControl';
+
 
 export default function MultilineTextFields() {
   return (
-    <Box
-      component="form"
-      sx={{ '& .MuiTextField-root': { m: 1, width: '25ch' } }}
-      noValidate
-      autoComplete="off"
-    >
-      <div>
-        <TextField
-          id="outlined-multiline-flexible"
-          label="Multiline"
-          multiline
-          maxRows={4}
-        />
-        <TextField
-          id="outlined-textarea"
-          label="Multiline Placeholder"
-          placeholder="Placeholder"
-          multiline
-        />
-        <TextField
-          id="outlined-multiline-static"
-          label="Multiline"
-          multiline
-          rows={4}
-          defaultValue="Default Value"
-        />
-      </div>
-      <div>
-        <TextField
-          id="filled-multiline-flexible"
-          label="Multiline"
-          multiline
-          maxRows={4}
-          variant="filled"
-        />
-        <TextField
-          id="filled-textarea"
-          label="Multiline Placeholder"
-          placeholder="Placeholder"
-          multiline
-          variant="filled"
-        />
-        <TextField
-          id="filled-multiline-static"
-          label="Multiline"
-          multiline
-          rows={4}
-          defaultValue="Default Value"
-          variant="filled"
-        />
-      </div>
-      <div>
-        <TextField
-          id="standard-multiline-flexible"
-          label="Multiline"
-          multiline
-          maxRows={4}
-          variant="standard"
-        />
-        <TextField
-          id="standard-textarea"
-          label="Multiline Placeholder"
-          placeholder="Placeholder"
-          multiline
-          variant="standard"
-        />
-        <TextField
-          id="standard-multiline-static"
-          label="Multiline"
-          multiline
-          rows={4}
-          defaultValue="Default Value"
-          variant="standard"
-        />
-      </div>
-    </Box>
+    <StyledEngineProvider injectFirst>
+      <Box
+        component="form"
+        sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
+        noValidate
+        autoComplete="off"
+      >
+        <div>
+          <TextField
+          className="bio-input"
+            id="outlined-multiline-flexible"
+            label="Multiline"
+            multiline
+            maxRows={4}
+            onChange={(event) => {}}
+          />
+        </div>
+      </Box>
+    </StyledEngineProvider>
   );
 }
diff --git a/code/frontend/src/Profile.tsx b/code/frontend/src/Profile.tsx
index 52d9726..f50db87 100644
--- a/code/frontend/src/Profile.tsx
+++ b/code/frontend/src/Profile.tsx
@@ -1,32 +1,105 @@
 import "./profile.css";
+import "./bio.css";
 import "./loginAndSignUpPage.css";
 import { useState } from "react";
 import Avatar from "@mui/material/Avatar";
 import QuiltedImageList from "./QuiltedImageList";
 import { deepOrange } from "@mui/material/colors";
 import Hashtags from "./Hashtags";
+import TextField from "@mui/material/TextField";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import {
+  Box,
+  IconButton,
+  StyledEngineProvider,
+  createTheme,
+  ThemeProvider,
+  Divider,
+  Button,
+} from "@mui/material";
+import EditIcon from "@mui/icons-material/EditSquare";
 
 function Profile() {
+  const toggleEditMode = (event: React.MouseEvent<HTMLElement>) => {
+    event.preventDefault();
+    isEditable(!editMode);
+  };
+  const [editMode, isEditable] = useState(false);
+  const [text, setText] = useState("");
+
+  const theme = createTheme({
+    breakpoints: {
+      values: {
+        xs: 0,
+        sm: 768,
+        md: 650,
+        lg: 768,
+        xl: 1200,
+      },
+    },
+  });
+  const matchDownMd = useMediaQuery(theme.breakpoints.down("sm"));
+
   return (
-    <div className="profile-display">
-      <div className="user-info">
-        <div className="user">
-          <Avatar
-            alt="Username"
-            src="./assets/images/OwlSignUp.png"
-            sx={{ width: 56, height: 56, bgcolor: deepOrange[500] }}
-          >
-            U
-          </Avatar>
-          <span className="profile-username body-m">Username</span>
-          {/* Bio */}
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <div className="profile-display">
+          <div className="user-info">
+            <div className="user">
+              <Avatar
+                alt="Username"
+                src="./assets/images/OwlSignUp.png"
+                className="profile-avatar"
+              >
+                U
+              </Avatar>
+              <span className="profile-username body-m">Username</span>
+            </div>
+            <div>
+              <Box
+                component="form"
+                sx={{
+                  "& .MuiTextField-root": {
+                    m: 1,
+                    width: "30ch",
+                    maxWidth: "100%",
+                  },
+                }}
+                noValidate
+                autoComplete="off"
+              >
+                <TextField
+                  className="bio-input"
+                  id="outlined-multiline-flexible"
+                  label="✎ Bio"
+                  multiline
+                  maxRows={4}
+                  disabled={editMode}
+                  onDoubleClick={toggleEditMode}
+                />
+              </Box>
+              {!editMode && <Button variant="contained" className="button" onClick={toggleEditMode}>Ok</Button>}
+            </div>
+            <Divider variant="middle" className="divider"/>
+            <div className="numeral-data">
+              <div className="data">
+                <span aria-label="current-post-number">50</span>
+                <span className="data-label">Posts</span>
+              </div>
+              <div className="data">
+                <span aria-label="current-follower-number">100</span>
+                <span className="data-label">Followers</span>
+              </div>
+              <div className="data">
+                <span aria-label="current-following-number">50</span>
+                <span className="data-label">Following</span>
+              </div>
+            </div>
+          </div>
+          <QuiltedImageList />
         </div>
-        <span className="post-number">50 Posts</span>
-      </div>
-        <QuiltedImageList />
-      <div className="image-list">
-      </div>
-    </div>
+      </ThemeProvider>
+    </StyledEngineProvider>
   );
 }
 
diff --git a/code/frontend/src/QuiltedImageList.tsx b/code/frontend/src/QuiltedImageList.tsx
index 3d774ce..49785fd 100644
--- a/code/frontend/src/QuiltedImageList.tsx
+++ b/code/frontend/src/QuiltedImageList.tsx
@@ -2,25 +2,34 @@ import * as React from "react";
 import ImageList from "@mui/material/ImageList";
 import ImageListItem from "@mui/material/ImageListItem";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
+import {
+  createTheme,
+  StyledEngineProvider,
+  ThemeProvider,
+} from "@mui/material/styles";
+import './quiltedImageList.css';
 
 export default function StandardImageList() {
-  const matchDownMd = useMediaQuery(theme.breakpoints.down("sm"));
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
+  const isLargeScreen = useMediaQuery(theme.breakpoints.down("xl"));
+
   return (
-    <ThemeProvider theme={theme}>
-      <ImageList variant="quilted" cols={matchDownMd ? 3 : 4 } rowHeight={180}>
-        {itemData.map((item) => (
-          <ImageListItem key={item.img}>
-            <img
-              srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
-              src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
-              alt={item.title}
-              loading="lazy"
-            />
-          </ImageListItem>
-        ))}
-      </ImageList>
-    </ThemeProvider>
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <ImageList className="image-list" variant="quilted" cols={isSmallScreen ? 3 : isLargeScreen ? 4 : 5} rowHeight={180}>
+          {itemData.map((item) => (
+            <ImageListItem key={item.img}>
+              <img
+                srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+                src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
+                alt={item.title}
+                loading="lazy"
+              />
+            </ImageListItem>
+          ))}
+        </ImageList>
+      </ThemeProvider>
+    </StyledEngineProvider>
   );
 }
 
@@ -28,7 +37,7 @@ const theme = createTheme({
   breakpoints: {
     values: {
       xs: 0,
-      sm: 768,
+      sm: 1000,
       md: 650,
       lg: 768,
       xl: 1200,
@@ -45,339 +54,339 @@ const itemData = [
   { img: "/assets/images/SummerOwlSignup.jpg", title: "Summer Owl" },
 
   {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Breakfast',
+    img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
+    title: "Breakfast",
   },
   {
-    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
-    title: 'Burger',
+    img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
+    title: "Burger",
   },
   {
-    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
-    title: 'Camera',
+    img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
+    title: "Camera",
   },
   {
-    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
-    title: 'Coffee',
+    img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
+    title: "Coffee",
   },
   {
-    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
-    title: 'Hats',
+    img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
+    title: "Hats",
   },
   {
-    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
-    title: 'Honey',
+    img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
+    title: "Honey",
   },
   {
-    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
-    title: 'Basketball',
+    img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
+    title: "Basketball",
   },
   {
-    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
-    title: 'Fern',
+    img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
+    title: "Fern",
   },
   {
-    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
-    title: 'Mushrooms',
+    img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
+    title: "Mushrooms",
   },
   {
-    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
-    title: 'Tomato basil',
+    img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
+    title: "Tomato basil",
   },
   {
-    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
-    title: 'Sea star',
+    img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
+    title: "Sea star",
   },
   {
-    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
-    title: 'Bike',
+    img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
+    title: "Bike",
   },
   {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Breakfast',
+    img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
+    title: "Breakfast",
   },
   {
-    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
-    title: 'Burger',
+    img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
+    title: "Burger",
   },
   {
-    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
-    title: 'Camera',
+    img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
+    title: "Camera",
   },
   {
-    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
-    title: 'Coffee',
+    img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
+    title: "Coffee",
   },
   {
-    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
-    title: 'Hats',
+    img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
+    title: "Hats",
   },
   {
-    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
-    title: 'Honey',
+    img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
+    title: "Honey",
   },
   {
-    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
-    title: 'Basketball',
+    img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
+    title: "Basketball",
   },
   {
-    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
-    title: 'Fern',
+    img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
+    title: "Fern",
   },
   {
-    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
-    title: 'Mushrooms',
+    img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
+    title: "Mushrooms",
   },
   {
-    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
-    title: 'Tomato basil',
+    img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
+    title: "Tomato basil",
   },
   {
-    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
-    title: 'Sea star',
+    img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
+    title: "Sea star",
   },
   {
-    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
-    title: 'Bike',
+    img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
+    title: "Bike",
   },
   {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Breakfast',
+    img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
+    title: "Breakfast",
   },
   {
-    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
-    title: 'Burger',
+    img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
+    title: "Burger",
   },
   {
-    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
-    title: 'Camera',
+    img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
+    title: "Camera",
   },
   {
-    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
-    title: 'Coffee',
+    img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
+    title: "Coffee",
   },
   {
-    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
-    title: 'Hats',
+    img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
+    title: "Hats",
   },
   {
-    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
-    title: 'Honey',
+    img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
+    title: "Honey",
   },
   {
-    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
-    title: 'Basketball',
+    img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
+    title: "Basketball",
   },
   {
-    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
-    title: 'Fern',
+    img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
+    title: "Fern",
   },
   {
-    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
-    title: 'Mushrooms',
+    img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
+    title: "Mushrooms",
   },
   {
-    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
-    title: 'Tomato basil',
+    img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
+    title: "Tomato basil",
   },
   {
-    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
-    title: 'Sea star',
+    img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
+    title: "Sea star",
   },
   {
-    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
-    title: 'Bike',
+    img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
+    title: "Bike",
   },
   {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Breakfast',
+    img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
+    title: "Breakfast",
   },
   {
-    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
-    title: 'Burger',
+    img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
+    title: "Burger",
   },
   {
-    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
-    title: 'Camera',
+    img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
+    title: "Camera",
   },
   {
-    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
-    title: 'Coffee',
+    img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
+    title: "Coffee",
   },
   {
-    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
-    title: 'Hats',
+    img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
+    title: "Hats",
   },
   {
-    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
-    title: 'Honey',
+    img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
+    title: "Honey",
   },
   {
-    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
-    title: 'Basketball',
+    img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
+    title: "Basketball",
   },
   {
-    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
-    title: 'Fern',
+    img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
+    title: "Fern",
   },
   {
-    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
-    title: 'Mushrooms',
+    img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
+    title: "Mushrooms",
   },
   {
-    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
-    title: 'Tomato basil',
+    img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
+    title: "Tomato basil",
   },
   {
-    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
-    title: 'Sea star',
+    img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
+    title: "Sea star",
   },
   {
-    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
-    title: 'Bike',
+    img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
+    title: "Bike",
   },
   {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Breakfast',
+    img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
+    title: "Breakfast",
   },
   {
-    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
-    title: 'Burger',
+    img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
+    title: "Burger",
   },
   {
-    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
-    title: 'Camera',
+    img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
+    title: "Camera",
   },
   {
-    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
-    title: 'Coffee',
+    img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
+    title: "Coffee",
   },
   {
-    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
-    title: 'Hats',
+    img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
+    title: "Hats",
   },
   {
-    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
-    title: 'Honey',
+    img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
+    title: "Honey",
   },
   {
-    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
-    title: 'Basketball',
+    img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
+    title: "Basketball",
   },
   {
-    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
-    title: 'Fern',
+    img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
+    title: "Fern",
   },
   {
-    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
-    title: 'Mushrooms',
+    img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
+    title: "Mushrooms",
   },
   {
-    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
-    title: 'Tomato basil',
+    img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
+    title: "Tomato basil",
   },
   {
-    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
-    title: 'Sea star',
+    img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
+    title: "Sea star",
   },
   {
-    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
-    title: 'Bike',
+    img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
+    title: "Bike",
   },
   {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Breakfast',
+    img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
+    title: "Breakfast",
   },
   {
-    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
-    title: 'Burger',
+    img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
+    title: "Burger",
   },
   {
-    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
-    title: 'Camera',
+    img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
+    title: "Camera",
   },
   {
-    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
-    title: 'Coffee',
+    img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
+    title: "Coffee",
   },
   {
-    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
-    title: 'Hats',
+    img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
+    title: "Hats",
   },
   {
-    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
-    title: 'Honey',
+    img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
+    title: "Honey",
   },
   {
-    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
-    title: 'Basketball',
+    img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
+    title: "Basketball",
   },
   {
-    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
-    title: 'Fern',
+    img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
+    title: "Fern",
   },
   {
-    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
-    title: 'Mushrooms',
+    img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
+    title: "Mushrooms",
   },
   {
-    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
-    title: 'Tomato basil',
+    img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
+    title: "Tomato basil",
   },
   {
-    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
-    title: 'Sea star',
+    img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
+    title: "Sea star",
   },
   {
-    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
-    title: 'Bike',
+    img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
+    title: "Bike",
   },
   {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Breakfast',
+    img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
+    title: "Breakfast",
   },
   {
-    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
-    title: 'Burger',
+    img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
+    title: "Burger",
   },
   {
-    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
-    title: 'Camera',
+    img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
+    title: "Camera",
   },
   {
-    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
-    title: 'Coffee',
+    img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
+    title: "Coffee",
   },
   {
-    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
-    title: 'Hats',
+    img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
+    title: "Hats",
   },
   {
-    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
-    title: 'Honey',
+    img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
+    title: "Honey",
   },
   {
-    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
-    title: 'Basketball',
+    img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
+    title: "Basketball",
   },
   {
-    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
-    title: 'Fern',
+    img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
+    title: "Fern",
   },
   {
-    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
-    title: 'Mushrooms',
+    img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
+    title: "Mushrooms",
   },
   {
-    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
-    title: 'Tomato basil',
+    img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
+    title: "Tomato basil",
   },
   {
-    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
-    title: 'Sea star',
+    img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
+    title: "Sea star",
   },
   {
-    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
-    title: 'Bike',
+    img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
+    title: "Bike",
   },
 ];
diff --git a/code/frontend/src/bio.css b/code/frontend/src/bio.css
new file mode 100644
index 0000000..8a6afb3
--- /dev/null
+++ b/code/frontend/src/bio.css
@@ -0,0 +1,44 @@
+.bio-input {
+    margin: 0.5rem;
+}
+
+/* Root class for the input field */
+.bio-input .MuiOutlinedInput-root {
+  color: var(--Rotkehlchen-gray-default);
+}
+/* Class for the border around the input field */
+.bio-input .MuiOutlinedInput-notchedOutline {
+    border-color: var(--Rotkehlchen-brown-light);
+}
+/* Class for the label of the input field */
+.bio-input .MuiInputLabel-outlined {
+    color: var(--Rotkehlchen-brown-light);
+}
+/* Class for the border in focused state */
+.bio-input .Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: var(--Rotkehlchen-yellow-default);
+}
+/* Disabled input field text and border color */
+.bio-input .css-w4nesw-MuiInputBase-input-MuiOutlinedInput-input.Mui-disabled {
+  -webkit-text-fill-color: var(--Rotkehlchen-gray-default);
+}
+.bio-input
+  .MuiInputBase-root.MuiOutlinedInput-root.Mui-disabled
+  .MuiOutlinedInput-notchedOutline {
+  border-color: transparent;
+}
+
+@media screen and (min-width: 768px) {
+  .bio-input {
+    width: 100%;
+    margin: 1rem;
+  }
+  .bio-input .MuiInputLabel-outlined {
+    font-size: 18px;
+  }
+  .bio-input .MuiOutlinedInput-input {
+    font-size: 18px;
+    padding: 10px;
+  }
+    
+}
\ No newline at end of file
diff --git a/code/frontend/src/components/header.css b/code/frontend/src/components/header.css
index 3131275..c7484ca 100644
--- a/code/frontend/src/components/header.css
+++ b/code/frontend/src/components/header.css
@@ -1,3 +1,9 @@
+:root {
+  --Rotkehlchen-gray: #e7ecf2;
+  --Rotkehlchen-brown1: #a28d7a;
+  --Rotkehlchen-orange-default: #e79a0e;
+}
+
 .base-header {
   width: 100vw;
   display: flex;
diff --git a/code/frontend/src/profile.css b/code/frontend/src/profile.css
index 1137587..81e6de9 100644
--- a/code/frontend/src/profile.css
+++ b/code/frontend/src/profile.css
@@ -18,63 +18,129 @@
   );
   align-items: center;
   background-attachment: fixed;
+  padding-top: var(--Header-hight);
   z-index: -1;
 }
 
+.user-info {
+    display: flex;
+    flex-direction: column;
+    border-radius: 1rem;
+    background-color: hsla(244, 70%, 13%, 0.71);
+    backdrop-filter: blur(8px);
+    margin-top: 1rem;
+  }
+
 .user {
     display: flex;
     width: fit-content;
     align-items: center;
     gap: 20px;
-    padding: 2rem;
+    margin: 2rem;
+    border-radius: 1rem;
   }
 
-  .post-number {
-    font-size: 20px;
-    font-weight: 500;
-    color: var(--Rotkehlchen-brown-dark);
+  .numeral-data {
+    display: flex;
+    flex-direction: row;
+    font-size: 18px;
+    font-weight: 500;   
+    color: var(--Rotkehlchen-gray-default);
+    border-radius: 1rem;
+  }
+
+  .data {
+    display: flex;
+    flex-direction: column;
+    margin: 1rem;
+  }
+
+  .profile-avatar {
+    width: 40px;
+    height: 40px;
+    background-color: aqua;
   }
 
   .profile-username {
     font-size: 24px;
     font-weight: 700;
-    color: var(--Rotkehlchen-brown-dark);
+    color: var(--Rotkehlchen-orange-default);
   }
 
-  .image-list {
-    width: fit-content;
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
+  .edit-profile {
+    color: var(--Rotkehlchen-orange-default);
+    font-size: 25px;
+  }
+
+  .bio {
+    display: flex;
+    align-content: start;
+    padding: 2px;
+    border: 1px solid var(--Rotkehlchen-brown-light);
+    color: aliceblue;
+  }
+
+  .divider {
+    border-color: var(--Rotkehlchen-brown-light);
   }
 
 @media screen and (min-width: 768px) {
-  .user-info {
+.profile-display {
     display: flex;
     flex-direction: row;
-    margin-top: 2rem;
     justify-content: space-around;
-    align-items: center;
+    align-items: baseline;
+}
+
+  .user-info {
+    display: flex;
+    flex-direction: column;
+    margin-left: 2rem;
+    border-radius: 1rem;
+    background-color: hsla(244, 70%, 13%, 0.71);
+    align-self: top;
+  }
+
+  .button {
+    margin-bottom: 0.5rem;
   }
 
   .user {
-    width: 553px;
+    width: fit-content;
+    padding-left: 1rem;
+    padding-right: 3rem;
   }
 
-  .post-number {
-    font-size: 20px;
+  .numeral-data {
+    display: flex;
+    flex-direction: column;
+    margin-top: 2rem;
+    font-size: 26px;
+    font-weight: 750;
+  }
+
+  .data-label {
     font-weight: 500;
   }
 
+  .data {
+    display: flex;
+    flex-direction: column;
+    margin: 1rem;
+  }
+
   .profile-username {
     font-size: 24px;
     font-weight: 700;
   }
 
-  .image-list {
-    width: fit-content;
-    /* TODO: Fix size of shown list (crop images on bottom of screen */
-    max-height: 600px;
-    margin-left: 1rem;
-    margin-right: 1rem;
+  .profile-avatar {
+    width: 5rem;
+    height: 5rem;
+    background-color: aqua;
+  }
+
+  .edit-profile {
+    font-size: 35px;
   }
 }
diff --git a/code/frontend/src/quiltedImageList.css b/code/frontend/src/quiltedImageList.css
index a105dd9..7ddc536 100644
--- a/code/frontend/src/quiltedImageList.css
+++ b/code/frontend/src/quiltedImageList.css
@@ -1,22 +1,16 @@
-
-.quilted-image-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  width: fit-content;
-  margin: auto;
+.imageList {    
+    height: 100vh;
+    width: fit-content;
+    margin-left: 1rem;
+    margin-right: 1rem;
 }
 
-
-
 @media only screen and (min-width: 768px) {
-  .quilted-image-list {
-    display: flex;
-    gap: 10px;
+  .image-list {
+    height:  90vh;
+    position: relative;
     width: fit-content;
-    justify-content: center;
-    align-self: center;
+    margin-left: 1rem;
+    margin-right: 10ch;
   }
 }