diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
new file mode 100644
index 0000000..050eb13
--- /dev/null
+++ b/app/components/Footer.tsx
@@ -0,0 +1,13 @@
+export default function Footer() {
+    return (
+        <div className="flex w-full flex-grow items-end pt-10">
+            <div className="text-md flex w-full flex-col items-center bg-black px-2 py-3 text-center text-gray-200 sm:px-20 sm:text-lg">
+                <h2>&copy; {new Date().getFullYear()} Hy Nguyen</h2>
+                <h2>
+                    <span className="font-bold">Disclaimer:</span> This is a
+                    demo website project, not a real online store!
+                </h2>
+            </div>
+        </div>
+    );
+}
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 6f074b3..713253f 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useState, useRef } from "react";
 import { Link } from "@remix-run/react";
 
 import brandTextImage from "~/assets/brand_text.png";
diff --git a/app/root.tsx b/app/root.tsx
index b163628..e21b7db 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -31,6 +31,7 @@ import {
     RawCartItem,
 } from "./utils/types/ContextProps.type";
 import PopupNotificationsList from "./components/PopupNotificationsList";
+import Footer from "./components/Footer";
 
 export const links: LinksFunction = () => [
     { rel: "stylesheet", href: stylesheet },
@@ -218,6 +219,8 @@ function App() {
                     />
                 </div>
 
+                <Footer />
+
                 <PopupNotificationsList notifications={notifications} />
 
                 <Scripts />
diff --git a/app/routes/orders/OrderItem.tsx b/app/routes/orders/OrderItem.tsx
deleted file mode 100644
index 98c0211..0000000
--- a/app/routes/orders/OrderItem.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useOutletContext } from "@remix-run/react";
-import { Tables } from "database.types";
-import { useEffect, useState } from "react";
-import { ContextProps } from "~/utils/types/ContextProps.type";
-
-type Props = {
-    orderItem: Tables<"ORDERS_ITEMS">;
-};
-
-export default function OrderItem({ orderItem }: Props) {
-    const { supabase, env } = useOutletContext<ContextProps>();
-    const [imgName, setImgName] = useState<string | null>(null);
-    const [productIsNotFound, setProductIsNotFound] = useState<boolean>(false);
-
-    useEffect(() => {
-        (async function () {
-            if (orderItem.product_id === null) {
-                return setProductIsNotFound(true);
-            }
-
-            // fetch first image of product
-            const { data: fetchedImageData, error: imageError } =
-                await supabase.storage
-                    .from("product_images")
-                    .list(orderItem.product_id.toLocaleString(), {
-                        limit: 1,
-                        sortBy: { column: "name", order: "asc" },
-                    });
-
-            if (imageError) {
-                console.error("Error fetching image", imageError);
-                return;
-            }
-
-            if (fetchedImageData.length > 0) {
-                setImgName(fetchedImageData[0].name);
-            }
-        })();
-    }, []);
-
-    return (
-        <div>
-            {productIsNotFound ? (
-                <p>This product is deleted.</p>
-            ) : imgName === null ? (
-                <p>loading...</p>
-            ) : (
-                <img
-                    className="w-80"
-                    src={`${env.SUPABASE_IMAGES_PATH}/${orderItem.product_id}/${imgName}`}
-                />
-            )}
-            <p>title: {orderItem.title}</p>
-            <p>subtoal: {orderItem.subtotal}</p>
-            <p>quantity: {orderItem.quantity}</p>
-        </div>
-    );
-}
diff --git a/app/routes/orders/OrderModal.tsx b/app/routes/orders/OrderModal.tsx
deleted file mode 100644
index bfdb354..0000000
--- a/app/routes/orders/OrderModal.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { SupabaseClient } from "@supabase/supabase-js";
-import { Tables } from "database.types";
-import { useEffect, useState } from "react";
-import OrderItem from "./OrderItem";
-
-type Props = {
-    supabase: SupabaseClient;
-    showOrderModal: boolean;
-    setShowOrderModal: SetState<boolean>;
-    selectedOrderId: number | null;
-};
-
-export default function OrderModal({
-    supabase,
-    showOrderModal,
-    setShowOrderModal,
-    selectedOrderId,
-}: Props) {
-    const [orderItems, setOrderItems] = useState<Tables<"ORDERS_ITEMS">[]>([]);
-
-    // fetch order-items for selected order
-    useEffect(() => {
-        if (selectedOrderId === null) return;
-
-        (async function () {
-            const { data, error } = await supabase
-                .from("ORDERS_ITEMS")
-                .select("*")
-                .eq("order_id", selectedOrderId)
-                .returns<Tables<"ORDERS_ITEMS">[]>();
-
-            if (error) {
-                console.error("Error fetching order items", error);
-                return;
-            }
-
-            setOrderItems(data);
-        })();
-    }, [selectedOrderId]);
-
-    if (!showOrderModal) return null;
-
-    return (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
-            <div className="h-3/4 w-11/12 max-w-[600px] overflow-y-scroll bg-color-1">
-                <div className="flex flex-row">
-                    <h1>Order: {selectedOrderId}</h1>
-                    <button
-                        className="btn"
-                        onClick={() => setShowOrderModal(false)}
-                    >
-                        Close
-                    </button>
-                </div>
-
-                <div>
-                    {orderItems.map((orderItem) => (
-                        <OrderItem key={orderItem.id} orderItem={orderItem} />
-                    ))}
-                </div>
-            </div>
-        </div>
-    );
-}
diff --git a/app/routes/product.$productID/reviews_section/ReviewForm.tsx b/app/routes/product.$productID/reviews_section/ReviewForm.tsx
index 8cf302b..8eba711 100644
--- a/app/routes/product.$productID/reviews_section/ReviewForm.tsx
+++ b/app/routes/product.$productID/reviews_section/ReviewForm.tsx
@@ -182,14 +182,14 @@ export default function ReviewForm({
             {!enableFormInput ? (
                 <div className="flex justify-end">
                     <button
-                        className="rounded-md bg-bgColor2 px-3 py-1 text-sm font-medium text-primaryTextColor hover:bg-bgColor3"
+                        className="rounded-md bg-bgColor2 px-3 py-1 text-sm font-medium text-textColor1 hover:bg-bgColor3"
                         type="button"
                         onClick={() => setEnableFormInput(true)}
                     >
                         Edit
                     </button>
                     <button
-                        className="ml-2 rounded-md bg-bgColor2 px-3 py-1 text-sm font-medium text-primaryTextColor hover:bg-bgColor3"
+                        className="ml-2 rounded-md bg-bgColor2 px-3 py-1 text-sm font-medium text-textColor1 hover:bg-bgColor3"
                         type="button"
                         onClick={deleteReview}
                     >
diff --git a/app/routes/profile/AvatarCustomization.tsx b/app/routes/profile/AvatarCustomization.tsx
deleted file mode 100644
index f067abd..0000000
--- a/app/routes/profile/AvatarCustomization.tsx
+++ /dev/null
@@ -1,289 +0,0 @@
-import { MouseEventHandler, useEffect, useMemo, useState } from "react";
-import * as bigSmile from "@dicebear/big-smile";
-import { createAvatar } from "@dicebear/core";
-import { AvatarOptions } from "~/utils/types/AvatarOptions";
-
-import SpinnerSVG from "~/components/SpinnerSVG";
-import { hair, eyes, mouth, accessories } from "./AvatarOptions";
-import { useOutletContext } from "@remix-run/react";
-import { ContextProps } from "~/utils/types/ContextProps.type";
-
-type Props = {
-    setEnableAvatarCustomization: SetState<boolean>;
-    setAvatarUriTrigger: SetState<{}>;
-};
-
-export default function AvatarCustomization({
-    setEnableAvatarCustomization,
-    setAvatarUriTrigger,
-}: Props) {
-    const { supabase, user } = useOutletContext<ContextProps>();
-
-    const [avatarOptions, setAvatarOptions] = useState<AvatarOptions | null>(
-        null,
-    );
-    const [avatarUri, setAvatarUri] = useState<string>("");
-
-    // fetch avatar options from db
-    useEffect(() => {
-        (async function () {
-            if (!user) return;
-            const { data, error } = await supabase
-                .from("AVATARS")
-                .select(`*`)
-                .eq("id", user.id)
-                .single();
-
-            if (error) {
-                console.error("Error fetching avatar");
-                return;
-            }
-
-            setAvatarOptions({
-                accessoriesProbability: data.accessoriesProbability!,
-                backgroundColor: [data.backgroundColor!],
-                skinColor: [data.skinColor!],
-                hairColor: [data.hairColor!],
-                hair: [data.hair!] as AvatarOptions["hair"],
-                eyes: [data.eyes!] as AvatarOptions["eyes"],
-                mouth: [data.mouth!] as AvatarOptions["mouth"],
-                accessories: [
-                    data.accessories!,
-                ] as AvatarOptions["accessories"],
-            });
-        })();
-    }, []);
-
-    // update avatar preview when options change
-    useEffect(() => {
-        if (avatarOptions === null) return;
-        setAvatarUri(createAvatar(bigSmile, avatarOptions).toDataUri());
-    }, [avatarOptions]);
-
-    // memorized images uri
-    const optionImageURIs: { [key: string]: string[] } = useMemo(
-        () => ({
-            hair: hair!.map((itemName) => {
-                return createAvatar(bigSmile, {
-                    hair: [itemName],
-                }).toDataUri();
-            }),
-            eyes: eyes!.map((itemName) => {
-                return createAvatar(bigSmile, {
-                    hair: ["shavedHead"],
-                    eyes: [itemName],
-                }).toDataUri();
-            }),
-            mouth: mouth!.map((itemName) => {
-                return createAvatar(bigSmile, {
-                    hair: ["shavedHead"],
-                    mouth: [itemName],
-                }).toDataUri();
-            }),
-            accessories: accessories!.map((itemName) => {
-                return createAvatar(bigSmile, {
-                    hair: ["shavedHead"],
-                    accessoriesProbability: 100,
-                    accessories: [itemName],
-                }).toDataUri();
-            }),
-        }),
-        [],
-    );
-
-    const optionSamples: {
-        [key: string]: {
-            uri: string;
-            applyToOptions: MouseEventHandler<HTMLButtonElement>;
-        }[];
-    } = {
-        hair: hair!.map((itemName, itemIndex) => {
-            return {
-                uri: optionImageURIs.hair[itemIndex],
-                applyToOptions: function () {
-                    setAvatarOptions({
-                        ...avatarOptions,
-                        hair: [itemName],
-                    });
-                },
-            };
-        }),
-        eyes: eyes!.map((itemName, itemIndex) => {
-            return {
-                uri: optionImageURIs.eyes[itemIndex],
-                applyToOptions: function () {
-                    setAvatarOptions({
-                        ...avatarOptions,
-                        eyes: [itemName],
-                    });
-                },
-            };
-        }),
-        mouth: mouth!.map((itemName, itemIndex) => {
-            return {
-                uri: optionImageURIs.mouth[itemIndex],
-                applyToOptions: function () {
-                    setAvatarOptions({
-                        ...avatarOptions,
-                        mouth: [itemName],
-                    });
-                },
-            };
-        }),
-        accessories: accessories!.map((itemName, itemIndex) => {
-            return {
-                uri: optionImageURIs.accessories[itemIndex],
-                applyToOptions: function () {
-                    setAvatarOptions({
-                        ...avatarOptions,
-                        accessoriesProbability: 100,
-                        accessories: [itemName],
-                    });
-                },
-            };
-        }),
-    };
-
-    // add special option "none" to accessories category
-    optionSamples.accessories.unshift({
-        uri: createAvatar(bigSmile, {
-            hair: ["shavedHead"],
-            accessoriesProbability: 0,
-        }).toDataUri(),
-        applyToOptions: function () {
-            setAvatarOptions({
-                ...avatarOptions,
-                accessoriesProbability: 0,
-            });
-        },
-    });
-
-    const saveAvatar: React.DOMAttributes<HTMLButtonElement>["onClick"] =
-        async function (event) {
-            const { error } = await supabase
-                .from("AVATARS")
-                .update({
-                    accessoriesProbability:
-                        avatarOptions!.accessoriesProbability,
-                    backgroundColor: avatarOptions!.backgroundColor![0],
-                    skinColor: avatarOptions!.skinColor![0],
-                    hairColor: avatarOptions!.hairColor![0],
-                    hair: avatarOptions!.hair![0],
-                    eyes: avatarOptions!.eyes![0],
-                    mouth: avatarOptions!.mouth![0],
-                    accessories: avatarOptions!.accessories![0],
-                })
-                .eq("id", user!.id);
-            if (error) {
-                console.error("Error update avatar", error);
-                return;
-            }
-
-            // successfully updated
-            setAvatarUriTrigger({});
-            setEnableAvatarCustomization(false);
-        };
-
-    const customizeOptions: [
-        string,
-        (typeof optionSamples)[keyof typeof optionSamples],
-    ][] = [
-        ["Hair", optionSamples.hair],
-        ["Eyes", optionSamples.eyes],
-        ["Mouth", optionSamples.mouth],
-        ["Accessories", optionSamples.accessories],
-    ];
-
-    return (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
-            <div className="h-3/4 w-11/12 max-w-[800px] overflow-y-scroll bg-color-1">
-                <h1>Avatar customization</h1>
-
-                <div className="flex h-52 w-52 items-center justify-center">
-                    {avatarUri === "" ? (
-                        <div className="h-1/3 w-1/3">
-                            <SpinnerSVG />
-                        </div>
-                    ) : (
-                        <img className="h-full w-full" src={avatarUri} />
-                    )}
-                </div>
-
-                {
-                    // render option samples
-                    customizeOptions.map(([category, list], categoryIndex) => (
-                        <div key={categoryIndex}>
-                            <h2>{category}</h2>
-                            <div className="flex flex-wrap">
-                                {list.map((item, itemIndex) => (
-                                    <button
-                                        key={itemIndex}
-                                        className="btn m-2 !p-0"
-                                        onClick={item.applyToOptions}
-                                    >
-                                        <img
-                                            className="h-20 w-20"
-                                            src={item.uri}
-                                        />
-                                    </button>
-                                ))}
-                            </div>
-                        </div>
-                    ))
-                }
-
-                <h2>Skin color</h2>
-                <input
-                    type="color"
-                    value={"#" + avatarOptions?.skinColor}
-                    onChange={(e) => {
-                        setAvatarOptions({
-                            ...avatarOptions,
-                            skinColor: [
-                                e.currentTarget.value.toString().substring(1),
-                            ],
-                        });
-                    }}
-                />
-
-                <h2>Hair color</h2>
-                <input
-                    type="color"
-                    value={"#" + avatarOptions?.hairColor}
-                    onChange={(e) => {
-                        setAvatarOptions({
-                            ...avatarOptions,
-                            hairColor: [
-                                e.currentTarget.value.toString().substring(1),
-                            ],
-                        });
-                    }}
-                />
-
-                <h2>Background color</h2>
-                <input
-                    type="color"
-                    value={"#" + avatarOptions?.backgroundColor}
-                    onChange={(e) => {
-                        setAvatarOptions({
-                            ...avatarOptions,
-                            backgroundColor: [
-                                e.currentTarget.value.toString().substring(1),
-                            ],
-                        });
-                    }}
-                />
-
-                <button
-                    className="btn"
-                    onClick={() => setEnableAvatarCustomization(false)}
-                >
-                    Cancel
-                </button>
-                <button className="btn" onClick={saveAvatar}>
-                    Save
-                </button>
-            </div>
-        </div>
-    );
-}
diff --git a/app/routes/profile/index.tsx b/app/routes/profile/index.tsx
index 1517fe0..b6e2fe8 100644
--- a/app/routes/profile/index.tsx
+++ b/app/routes/profile/index.tsx
@@ -1,117 +1,25 @@
-import { Form, Link, useOutletContext } from "@remix-run/react";
-import { useEffect, useMemo, useState } from "react";
-
-import { createAvatar } from "@dicebear/core";
-import * as bigSmile from "@dicebear/big-smile";
+import { Link, useOutletContext } from "@remix-run/react";
 
 import { ContextProps } from "~/utils/types/ContextProps.type";
-import AvatarCustomization from "./AvatarCustomization";
-import SpinnerSVG from "~/components/SpinnerSVG";
-
-type ProfileData = {
-    display_name: string;
-    //// reviews, purchases
-};
+import MyWishlist from "./wishlist/MyWishlist";
+import MyOrders from "./orders/MyOrders";
+import MyReviews from "./reviews/MyReviews";
+import ProfileInfo from "./profile_info/ProfileInfo";
 
 export default function Profile() {
-    const { supabase, user } = useOutletContext<ContextProps>();
-
-    const [enableNameEdit, setEnableNameEdit] = useState<boolean>(false);
-    const [enableAvatarCustomization, setEnableAvatarCustomization] =
-        useState<boolean>(false);
-
-    const [profileData, setProfileData] = useState<ProfileData | null>(null);
-
-    const [nameValue, setNameValue] = useState<string>("");
-    const [defaultNameValue, setDefaultNameValue] = useState<string>("");
-
-    const [avatarUri, setAvatarUri] = useState<string>("");
-    // trigger a refetch
-    const [avatarUriTrigger, setAvatarUriTrigger] = useState<{}>({});
+    const { user } = useOutletContext<ContextProps>();
 
-    // fetch avatar options from db
+    /*
+    const location = useLocation();
+    // scroll to element
     useEffect(() => {
-        (async function () {
-            if (!user) return;
-            const { data, error } = await supabase
-                .from("AVATARS")
-                .select(`*`)
-                .eq("id", user.id)
-                .single();
-
-            if (error) {
-                console.error("Error fetching avatar");
-                return;
-            }
-
-            setAvatarUri(
-                createAvatar(bigSmile, {
-                    accessoriesProbability: data.accessoriesProbability!,
-                    backgroundColor: [data.backgroundColor!],
-                    skinColor: [data.skinColor!],
-                    hairColor: [data.hairColor!],
-                    // expect errors of not matching types
-                    // @ts-expect-error
-                    hair: [data.hair!],
-                    // @ts-expect-error
-                    eyes: [data.eyes!],
-                    // @ts-expect-error
-                    mouth: [data.mouth!],
-                    // @ts-expect-error
-                    accessories: [data.accessories!],
-                }).toDataUri(),
-            );
-        })();
-    }, [avatarUriTrigger]);
-
-    // fetch profile data
-    //// get more data here (reviews, orders, ...)
-    useEffect(() => {
-        (async function () {
-            if (!user) return;
-            const { data, error } = await supabase
-                .from("PROFILES")
-                .select("display_name")
-                .eq("id", user.id)
-                .returns<ProfileData[]>()
-                .single();
-            if (error) {
-                console.error("Error fetching profile", error);
-                return;
-            }
-            setProfileData(data);
-            setNameValue(data.display_name);
-            setDefaultNameValue(data.display_name);
-        })();
-    }, []);
-
-    const submitNameEdit: React.FormEventHandler<HTMLFormElement> =
-        async function (event) {
-            event.preventDefault();
-
-            // disable edit and set new default name
-            setEnableNameEdit(false);
-            setDefaultNameValue(nameValue);
-
-            // send update
-            const { error } = await supabase
-                .from("PROFILES")
-                .update({ display_name: nameValue })
-                .eq("id", user!.id);
-
-            if (error) {
-                console.error("Error updating name", error);
-            }
-        };
-    const cancelNameEdit: React.DOMAttributes<HTMLButtonElement>["onClick"] =
-        function (event) {
-            setEnableNameEdit(false);
-            setNameValue(defaultNameValue);
-        };
-    const onChangeNameEdit: React.ChangeEventHandler<HTMLInputElement> =
-        function (event) {
-            setNameValue(event.currentTarget.value.trimStart());
-        };
+        if (!hasScrolled && location.hash) {
+            const elementId = location.hash.replace("#", "");
+            const element = document.getElementById(elementId);
+            if (element) element.scrollIntoView({ behavior: "smooth" });
+        }
+    }, [hasScrolled, location.hash]);
+    */
 
     // unauthenticated render
     if (!user) {
@@ -125,79 +33,15 @@ export default function Profile() {
         );
     }
 
-    // loading render
-    if (profileData === null) {
-        return (
-            <div>
-                <h1>Loading...</h1>
-            </div>
-        );
-    }
-
     return (
-        <div>
-            <h1>My Profile</h1>
+        <div className="relative flex w-full max-w-[1200px] flex-col md:flex-row md:items-start">
+            <ProfileInfo />
 
-            <div>
-                <div className="flex h-40 w-40 items-center justify-center">
-                    {avatarUri === "" ? (
-                        <div className="h-1/3 w-1/3">
-                            <SpinnerSVG />
-                        </div>
-                    ) : (
-                        <img className="h-full w-full" src={avatarUri} />
-                    )}
-                </div>
-                <button
-                    className="btn"
-                    onClick={() => setEnableAvatarCustomization(true)}
-                >
-                    Edit avatar
-                </button>
-                {enableAvatarCustomization ? (
-                    <AvatarCustomization
-                        setEnableAvatarCustomization={
-                            setEnableAvatarCustomization
-                        }
-                        setAvatarUriTrigger={setAvatarUriTrigger}
-                    />
-                ) : null}
+            <div className="mt-10 flex flex-grow flex-col px-4 md:mt-0">
+                <MyWishlist />
+                <MyOrders />
+                <MyReviews />
             </div>
-
-            <Form onSubmit={submitNameEdit}>
-                <input
-                    className="bg-black"
-                    type="text"
-                    onChange={onChangeNameEdit}
-                    value={nameValue}
-                    disabled={!enableNameEdit}
-                    required
-                />
-                <div>
-                    {enableNameEdit ? (
-                        <>
-                            <button
-                                className="btn"
-                                type="button"
-                                onClick={cancelNameEdit}
-                            >
-                                Cancel
-                            </button>
-                            <button className="btn" type="submit">
-                                Save
-                            </button>
-                        </>
-                    ) : (
-                        <button
-                            className="btn"
-                            type="button"
-                            onClick={() => setEnableNameEdit(true)}
-                        >
-                            Edit name
-                        </button>
-                    )}
-                </div>
-            </Form>
         </div>
     );
 }
diff --git a/app/routes/orders/index.tsx b/app/routes/profile/orders/MyOrders.tsx
similarity index 50%
rename from app/routes/orders/index.tsx
rename to app/routes/profile/orders/MyOrders.tsx
index 60ff57b..4678ccc 100644
--- a/app/routes/orders/index.tsx
+++ b/app/routes/profile/orders/MyOrders.tsx
@@ -5,19 +5,21 @@ import { ContextProps } from "~/utils/types/ContextProps.type";
 import { Tables } from "database.types";
 import OrderModal from "./OrderModal";
 
-export default function OrdersPage() {
+export default function MyOrders() {
     const { supabase, user } = useOutletContext<ContextProps>();
     const [orders, setOrders] = useState<Tables<"ORDERS">[]>([]);
 
     const [showOrderModal, setShowOrderModal] = useState<boolean>(false);
-    const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null);
+    const [selectedOrder, setSelectedOrder] = useState<Tables<"ORDERS"> | null>(
+        null,
+    );
 
-    function orderClicked(orderId: number) {
+    function orderClicked(order: Tables<"ORDERS">) {
         setShowOrderModal(true);
-        setSelectedOrderId(orderId);
+        setSelectedOrder(order);
     }
 
-    // fetch orders if logged in
+    // fetch orders
     useEffect(() => {
         if (!user) return;
         (async function () {
@@ -35,32 +37,31 @@ export default function OrdersPage() {
         })();
     }, []);
 
-    if (!user) {
-        ////////
-        return <div>Not logged in</div>;
-    }
-
     return (
-        <div>
-            <h1>Orders</h1>
-            <p>Click to open modal</p>
-            <div className="flex flex-col">
+        <div className="mt-6 w-full">
+            <h1 className="mb-2 text-2xl font-medium text-textColor1">
+                My orders
+            </h1>
+            <div className="flex h-96 flex-col overflow-auto text-xl sm:text-2xl">
                 {orders.map((order) => (
                     <button
-                        className="btn"
+                        className="flex justify-between bg-bgColor2 px-3 py-2 text-textColor1 hover:bg-bgColor3 hover:text-primaryColor sm:px-5"
                         key={order.id}
-                        onClick={() => orderClicked(order.id)}
+                        onClick={() => orderClicked(order)}
                     >
-                        order: {new Date(order.created_at).toDateString()}
+                        <span className="underline">Order #{order.id}</span>
+                        <span className="ms-3 text-lg text-textColor2">
+                            {new Date(order.created_at).toLocaleDateString()}
+                        </span>
                     </button>
                 ))}
             </div>
-            <OrderModal
-                supabase={supabase}
-                showOrderModal={showOrderModal}
-                setShowOrderModal={setShowOrderModal}
-                selectedOrderId={selectedOrderId}
-            />
+            {showOrderModal ? (
+                <OrderModal
+                    setShowOrderModal={setShowOrderModal}
+                    selectedOrder={selectedOrder}
+                />
+            ) : null}
         </div>
     );
 }
diff --git a/app/routes/profile/orders/OrderItem.tsx b/app/routes/profile/orders/OrderItem.tsx
new file mode 100644
index 0000000..dee6722
--- /dev/null
+++ b/app/routes/profile/orders/OrderItem.tsx
@@ -0,0 +1,77 @@
+import { Link, useOutletContext } from "@remix-run/react";
+import { Tables } from "database.types";
+import { useEffect, useState } from "react";
+import SpinnerSVG from "~/components/SpinnerSVG";
+import { ContextProps } from "~/utils/types/ContextProps.type";
+
+type Props = {
+    orderItem: Tables<"ORDERS_ITEMS">;
+};
+
+export default function OrderItem({ orderItem }: Props) {
+    const { supabase, env } = useOutletContext<ContextProps>();
+    const [imgName, setImgName] = useState<string | null>(null);
+    const [imgIsLoaded, setImgIsLoaded] = useState<boolean>(false);
+
+    // fetch first image of product
+    useEffect(() => {
+        (async function () {
+            if (orderItem.product_id === null) {
+                return;
+            }
+
+            const { data: fetchedImageData, error: imageError } =
+                await supabase.storage
+                    .from("product_images")
+                    .list(orderItem.product_id.toLocaleString(), {
+                        limit: 1,
+                        sortBy: { column: "name", order: "asc" },
+                    });
+
+            if (imageError) {
+                console.error("Error fetching image", imageError);
+                return;
+            }
+
+            if (fetchedImageData.length > 0) {
+                setImgName(fetchedImageData[0].name);
+            }
+        })();
+    }, []);
+
+    return (
+        <tr className="odd:bg-white odd:bg-opacity-25 dark:odd:bg-black dark:odd:bg-opacity-15">
+            {/* Product image */}
+            <td>
+                <div className="flex h-16 w-16 items-center justify-center sm:h-32 sm:w-32">
+                    {imgName === null || !imgIsLoaded ? (
+                        <div className="h-1/3 w-1/3 text-primaryColor">
+                            <SpinnerSVG />
+                        </div>
+                    ) : null}
+                    {imgName !== null ? (
+                        <img
+                            className={`${imgIsLoaded ? "" : "hidden"} w-full`}
+                            src={`${env.SUPABASE_IMAGES_PATH}/${orderItem.product_id}/${imgName}`}
+                            onLoad={() => setImgIsLoaded(true)}
+                        />
+                    ) : null}
+                </div>
+            </td>
+
+            {/* Product title */}
+            <td>
+                <Link
+                    to={`/product/${orderItem.product_id}`}
+                    target="_blank"
+                    className="cursor-pointer text-lg leading-none underline hover:text-primaryColor sm:text-xl"
+                >
+                    {orderItem.title}
+                </Link>
+            </td>
+
+            <td>{orderItem.quantity}</td>
+            <td className="font-medium">${orderItem.subtotal.toFixed(2)}</td>
+        </tr>
+    );
+}
diff --git a/app/routes/profile/orders/OrderModal.tsx b/app/routes/profile/orders/OrderModal.tsx
new file mode 100644
index 0000000..97cb159
--- /dev/null
+++ b/app/routes/profile/orders/OrderModal.tsx
@@ -0,0 +1,109 @@
+import { Tables } from "database.types";
+import { useEffect, useState } from "react";
+import OrderItem from "./OrderItem";
+import { useOutletContext } from "@remix-run/react";
+import { ContextProps } from "~/utils/types/ContextProps.type";
+
+type Props = {
+    setShowOrderModal: SetState<boolean>;
+    selectedOrder: Tables<"ORDERS"> | null;
+};
+
+export default function OrderModal({
+    setShowOrderModal,
+    selectedOrder,
+}: Props) {
+    const { supabase } = useOutletContext<ContextProps>();
+    const [orderItems, setOrderItems] = useState<Tables<"ORDERS_ITEMS">[]>([]);
+
+    // fetch order-items for selected order
+    useEffect(() => {
+        if (!selectedOrder) return;
+        (async function () {
+            const { data, error } = await supabase
+                .from("ORDERS_ITEMS")
+                .select("*")
+                .eq("order_id", selectedOrder.id)
+                .returns<Tables<"ORDERS_ITEMS">[]>();
+
+            if (error) {
+                console.error("Error fetching order items", error);
+                return;
+            }
+
+            setOrderItems(data);
+        })();
+    }, []);
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
+            <div className="bg-color-1 flex h-5/6 w-11/12 max-w-[800px] flex-col rounded-lg border-2 border-textColor2 bg-bgColor1">
+                {/* Modal header */}
+                <div className="flex w-full flex-row border-b-2 border-textColor2">
+                    <h1 className="px-4 py-2 text-xl">Order details</h1>
+                    <button
+                        className="ml-auto mr-4 text-textColor1 hover:text-primaryColor"
+                        onClick={() => setShowOrderModal(false)}
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth={1.5}
+                            stroke="currentColor"
+                            className="size-8"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M6 18 18 6M6 6l12 12"
+                            />
+                        </svg>
+                    </button>
+                </div>
+
+                <div className="flex flex-grow flex-col overflow-y-auto">
+                    <div className="flex min-w-96 flex-col">
+                        {/* Items table */}
+                        <table className="w-full table-auto overflow-auto text-sm sm:text-lg">
+                            <thead className="h-10 text-left">
+                                <tr>
+                                    <th></th>
+                                    <th>Title</th>
+                                    <th>Quantity</th>
+                                    <th>Subtotal</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {orderItems.map((orderItem) => (
+                                    <OrderItem
+                                        key={orderItem.id}
+                                        orderItem={orderItem}
+                                    />
+                                ))}
+                            </tbody>
+                        </table>
+
+                        {/* Order info */}
+                        <div className="text:lg flex flex-col px-3 py-2 sm:text-xl">
+                            <p>
+                                <span className="font-medium">Total:</span> $
+                                {selectedOrder?.total_amount}
+                            </p>
+                            <p>
+                                <span className="font-medium">
+                                    Order Number:
+                                </span>{" "}
+                                #{selectedOrder?.id}
+                            </p>
+                            <p>
+                                <span className="font-medium">Payment ID:</span>{" "}
+                                {selectedOrder?.payment_id}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/app/routes/profile/profile_info/AvatarCustomization.tsx b/app/routes/profile/profile_info/AvatarCustomization.tsx
new file mode 100644
index 0000000..ec912c4
--- /dev/null
+++ b/app/routes/profile/profile_info/AvatarCustomization.tsx
@@ -0,0 +1,352 @@
+import { MouseEventHandler, useEffect, useMemo, useState } from "react";
+import * as bigSmile from "@dicebear/big-smile";
+import { createAvatar } from "@dicebear/core";
+import { AvatarOptions } from "~/utils/types/AvatarOptions";
+
+import SpinnerSVG from "~/components/SpinnerSVG";
+import { hair, eyes, mouth, accessories } from "./AvatarOptions";
+import { useOutletContext } from "@remix-run/react";
+import { ContextProps } from "~/utils/types/ContextProps.type";
+
+type Props = {
+    setShowAvatarModal: SetState<boolean>;
+    setAvatarUriTrigger: SetState<{}>;
+};
+
+export default function AvatarCustomization({
+    setShowAvatarModal,
+    setAvatarUriTrigger,
+}: Props) {
+    const { supabase, user } = useOutletContext<ContextProps>();
+
+    const [avatarOptions, setAvatarOptions] = useState<AvatarOptions | null>(
+        null,
+    );
+    const [avatarUri, setAvatarUri] = useState<string>("");
+
+    // fetch avatar options from db
+    useEffect(() => {
+        (async function () {
+            if (!user) return;
+            const { data, error } = await supabase
+                .from("AVATARS")
+                .select(`*`)
+                .eq("id", user.id)
+                .single();
+
+            if (error) {
+                console.error("Error fetching avatar");
+                return;
+            }
+
+            setAvatarOptions({
+                accessoriesProbability: data.accessoriesProbability!,
+                backgroundColor: [data.backgroundColor!],
+                skinColor: [data.skinColor!],
+                hairColor: [data.hairColor!],
+                hair: [data.hair!] as AvatarOptions["hair"],
+                eyes: [data.eyes!] as AvatarOptions["eyes"],
+                mouth: [data.mouth!] as AvatarOptions["mouth"],
+                accessories: [
+                    data.accessories!,
+                ] as AvatarOptions["accessories"],
+            });
+        })();
+    }, []);
+
+    // update avatar preview when options change
+    useEffect(() => {
+        if (avatarOptions === null) return;
+        setAvatarUri(createAvatar(bigSmile, avatarOptions).toDataUri());
+    }, [avatarOptions]);
+
+    // memorized images uri
+    const optionImageURIs: { [key: string]: string[] } = useMemo(
+        () => ({
+            hair: hair!.map((itemName) => {
+                return createAvatar(bigSmile, {
+                    hair: [itemName],
+                }).toDataUri();
+            }),
+            eyes: eyes!.map((itemName) => {
+                return createAvatar(bigSmile, {
+                    hair: ["shavedHead"],
+                    eyes: [itemName],
+                }).toDataUri();
+            }),
+            mouth: mouth!.map((itemName) => {
+                return createAvatar(bigSmile, {
+                    hair: ["shavedHead"],
+                    mouth: [itemName],
+                }).toDataUri();
+            }),
+            accessories: accessories!.map((itemName) => {
+                return createAvatar(bigSmile, {
+                    hair: ["shavedHead"],
+                    accessoriesProbability: 100,
+                    accessories: [itemName],
+                }).toDataUri();
+            }),
+        }),
+        [],
+    );
+
+    const optionSamples: {
+        [key: string]: {
+            uri: string;
+            applyToOptions: MouseEventHandler<HTMLButtonElement>;
+        }[];
+    } = {
+        hair: hair!.map((itemName, itemIndex) => {
+            return {
+                uri: optionImageURIs.hair[itemIndex],
+                applyToOptions: function () {
+                    setAvatarOptions({
+                        ...avatarOptions,
+                        hair: [itemName],
+                    });
+                },
+            };
+        }),
+        eyes: eyes!.map((itemName, itemIndex) => {
+            return {
+                uri: optionImageURIs.eyes[itemIndex],
+                applyToOptions: function () {
+                    setAvatarOptions({
+                        ...avatarOptions,
+                        eyes: [itemName],
+                    });
+                },
+            };
+        }),
+        mouth: mouth!.map((itemName, itemIndex) => {
+            return {
+                uri: optionImageURIs.mouth[itemIndex],
+                applyToOptions: function () {
+                    setAvatarOptions({
+                        ...avatarOptions,
+                        mouth: [itemName],
+                    });
+                },
+            };
+        }),
+        accessories: accessories!.map((itemName, itemIndex) => {
+            return {
+                uri: optionImageURIs.accessories[itemIndex],
+                applyToOptions: function () {
+                    setAvatarOptions({
+                        ...avatarOptions,
+                        accessoriesProbability: 100,
+                        accessories: [itemName],
+                    });
+                },
+            };
+        }),
+    };
+
+    // add special option "none" to accessories category
+    optionSamples.accessories.unshift({
+        uri: createAvatar(bigSmile, {
+            hair: ["shavedHead"],
+            accessoriesProbability: 0,
+        }).toDataUri(),
+        applyToOptions: function () {
+            setAvatarOptions({
+                ...avatarOptions,
+                accessoriesProbability: 0,
+            });
+        },
+    });
+
+    const saveAvatar: React.DOMAttributes<HTMLButtonElement>["onClick"] =
+        async function (event) {
+            const { error } = await supabase
+                .from("AVATARS")
+                .update({
+                    accessoriesProbability:
+                        avatarOptions!.accessoriesProbability,
+                    backgroundColor: avatarOptions!.backgroundColor![0],
+                    skinColor: avatarOptions!.skinColor![0],
+                    hairColor: avatarOptions!.hairColor![0],
+                    hair: avatarOptions!.hair![0],
+                    eyes: avatarOptions!.eyes![0],
+                    mouth: avatarOptions!.mouth![0],
+                    accessories: avatarOptions!.accessories![0],
+                })
+                .eq("id", user!.id);
+            if (error) {
+                console.error("Error update avatar", error);
+                return;
+            }
+
+            // successfully updated
+            setAvatarUriTrigger({});
+            setShowAvatarModal(false);
+        };
+
+    const customizeOptions: [
+        string,
+        (typeof optionSamples)[keyof typeof optionSamples],
+    ][] = [
+        ["Hair", optionSamples.hair],
+        ["Eyes", optionSamples.eyes],
+        ["Mouth", optionSamples.mouth],
+        ["Accessories", optionSamples.accessories],
+    ];
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
+            <div className="flex h-5/6 w-11/12 max-w-[800px] flex-col rounded-lg border-2 border-textColor2 bg-bgColor1">
+                {/* Modal header */}
+                <div className="flex w-full flex-row border-b-2 border-textColor2">
+                    <h1 className="px-4 py-2 text-xl">Customize avatar</h1>
+                    <button
+                        className="ml-auto mr-4 text-textColor1 hover:text-primaryColor"
+                        onClick={() => setShowAvatarModal(false)}
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth={1.5}
+                            stroke="currentColor"
+                            className="size-8"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M6 18 18 6M6 6l12 12"
+                            />
+                        </svg>
+                    </button>
+                </div>
+
+                <div className="relative flex w-full flex-grow flex-col overflow-hidden md:flex-row">
+                    {/* Avatar */}
+                    <div className="sticky flex flex-col items-start px-4 md:top-0 md:pt-20">
+                        <div className="mx-auto my-2 flex h-28 w-28 items-center justify-center overflow-hidden rounded-lg md:h-52 md:w-52">
+                            {avatarUri === "" ? (
+                                <div className="h-1/3 w-1/3">
+                                    <SpinnerSVG />
+                                </div>
+                            ) : (
+                                <img
+                                    className="h-full w-full"
+                                    src={avatarUri}
+                                />
+                            )}
+                        </div>
+                    </div>
+
+                    {/* Options */}
+                    <div className="flex flex-grow flex-col overflow-y-auto px-2 md:mt-0">
+                        {
+                            // render option samples
+                            customizeOptions.map(
+                                ([category, list], categoryIndex) => (
+                                    <div key={categoryIndex} className="mt-2">
+                                        <h2 className="text-lg italic">
+                                            {category}
+                                        </h2>
+                                        <div className="flex flex-wrap justify-center border-b-2 border-textColor2 pb-2">
+                                            {list.map((item, itemIndex) => (
+                                                <div
+                                                    key={itemIndex}
+                                                    className="flex w-1/4 justify-center sm:w-1/5"
+                                                >
+                                                    <button
+                                                        onClick={
+                                                            item.applyToOptions
+                                                        }
+                                                        className="click-shrink rounded-md border-2 border-bgColor1 hover:border-primaryColor"
+                                                    >
+                                                        <img
+                                                            className="h-20 w-20"
+                                                            src={item.uri}
+                                                        />
+                                                    </button>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </div>
+                                ),
+                            )
+                        }
+
+                        <h2 className="mt-2 text-lg italic">Colors</h2>
+                        <div className="mt-2 flex justify-around">
+                            <div className="flex flex-col items-center">
+                                <input
+                                    className="w-10 cursor-pointer bg-transparent sm:w-20"
+                                    type="color"
+                                    id="skin-color"
+                                    value={"#" + avatarOptions?.skinColor}
+                                    onChange={(e) => {
+                                        setAvatarOptions({
+                                            ...avatarOptions,
+                                            skinColor: [
+                                                e.currentTarget.value
+                                                    .toString()
+                                                    .substring(1),
+                                            ],
+                                        });
+                                    }}
+                                />
+                                <label htmlFor="skin-color">Skin</label>
+                            </div>
+
+                            <div className="flex flex-col items-center">
+                                <input
+                                    className="w-10 cursor-pointer bg-transparent sm:w-20"
+                                    type="color"
+                                    id="hair-color"
+                                    value={"#" + avatarOptions?.hairColor}
+                                    onChange={(e) => {
+                                        setAvatarOptions({
+                                            ...avatarOptions,
+                                            hairColor: [
+                                                e.currentTarget.value
+                                                    .toString()
+                                                    .substring(1),
+                                            ],
+                                        });
+                                    }}
+                                />
+                                <label htmlFor="hair-color">Hair</label>
+                            </div>
+
+                            <div className="flex flex-col items-center">
+                                <input
+                                    className="w-10 cursor-pointer bg-transparent sm:w-20"
+                                    type="color"
+                                    id="background-color"
+                                    value={"#" + avatarOptions?.backgroundColor}
+                                    onChange={(e) => {
+                                        setAvatarOptions({
+                                            ...avatarOptions,
+                                            backgroundColor: [
+                                                e.currentTarget.value
+                                                    .toString()
+                                                    .substring(1),
+                                            ],
+                                        });
+                                    }}
+                                />
+                                <label htmlFor="background-color">
+                                    Background
+                                </label>
+                            </div>
+                        </div>
+
+                        <button
+                            className="click-shrink mx-3 mb-4 mt-6 self-end rounded-md bg-primaryColor px-4 py-1 text-lg font-medium text-primaryTextColor hover:bg-primaryColorMuted"
+                            onClick={saveAvatar}
+                        >
+                            Save
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/app/routes/profile/AvatarOptions.ts b/app/routes/profile/profile_info/AvatarOptions.ts
similarity index 100%
rename from app/routes/profile/AvatarOptions.ts
rename to app/routes/profile/profile_info/AvatarOptions.ts
diff --git a/app/routes/profile/profile_info/ProfileInfo.tsx b/app/routes/profile/profile_info/ProfileInfo.tsx
new file mode 100644
index 0000000..8221865
--- /dev/null
+++ b/app/routes/profile/profile_info/ProfileInfo.tsx
@@ -0,0 +1,192 @@
+import { Form, useOutletContext } from "@remix-run/react";
+import { useEffect, useState } from "react";
+
+import { createAvatar } from "@dicebear/core";
+import * as bigSmile from "@dicebear/big-smile";
+import { ContextProps } from "~/utils/types/ContextProps.type";
+import AvatarCustomization from "./AvatarCustomization";
+import SpinnerSVG from "~/components/SpinnerSVG";
+
+export default function ProfileInfo() {
+    const { supabase, user, addNotification } =
+        useOutletContext<ContextProps>();
+
+    const [enableNameEdit, setEnableNameEdit] = useState<boolean>(false);
+    const [showAvatarModal, setShowAvatarModal] = useState<boolean>(false);
+
+    const [nameValue, setNameValue] = useState<string>("");
+    const [defaultNameValue, setDefaultNameValue] = useState<string>("");
+
+    const [avatarUri, setAvatarUri] = useState<string>("");
+    // trigger a refetch
+    const [avatarUriTrigger, setAvatarUriTrigger] = useState<{}>({});
+
+    // fetch avatar options from db
+    useEffect(() => {
+        (async function () {
+            if (!user) return;
+            const { data, error } = await supabase
+                .from("AVATARS")
+                .select(`*`)
+                .eq("id", user.id)
+                .single();
+
+            if (error) {
+                console.error("Error fetching avatar");
+                addNotification("Error fetching avatar", "FAIL");
+                return;
+            }
+
+            setAvatarUri(
+                createAvatar(bigSmile, {
+                    accessoriesProbability: data.accessoriesProbability!,
+                    backgroundColor: [data.backgroundColor!],
+                    skinColor: [data.skinColor!],
+                    hairColor: [data.hairColor!],
+                    // expect errors of not matching types
+                    // @ts-expect-error
+                    hair: [data.hair!],
+                    // @ts-expect-error
+                    eyes: [data.eyes!],
+                    // @ts-expect-error
+                    mouth: [data.mouth!],
+                    // @ts-expect-error
+                    accessories: [data.accessories!],
+                }).toDataUri(),
+            );
+        })();
+    }, [avatarUriTrigger]);
+
+    // fetch display_name
+    useEffect(() => {
+        (async function () {
+            if (!user) return;
+            const { data: profileData, error: profileError } = await supabase
+                .from("PROFILES")
+                .select("display_name")
+                .eq("id", user.id)
+                .single();
+            if (profileError) {
+                console.error("Error fetching profile", profileError);
+                addNotification("Error fetching profile", "FAIL");
+                return;
+            }
+            setNameValue(profileData.display_name);
+            setDefaultNameValue(profileData.display_name);
+        })();
+    }, []);
+
+    const submitNameEdit: React.FormEventHandler<HTMLFormElement> =
+        async function (event) {
+            event.preventDefault();
+
+            // disable edit and set new default name
+            setEnableNameEdit(false);
+            setDefaultNameValue(nameValue);
+
+            // send update
+            const { error } = await supabase
+                .from("PROFILES")
+                .update({ display_name: nameValue })
+                .eq("id", user!.id);
+
+            if (error) {
+                console.error("Error updating name", error);
+            }
+        };
+    const cancelNameEdit: React.DOMAttributes<HTMLButtonElement>["onClick"] =
+        function (event) {
+            setEnableNameEdit(false);
+            setNameValue(defaultNameValue);
+        };
+    const onChangeNameEdit: React.ChangeEventHandler<HTMLInputElement> =
+        function (event) {
+            setNameValue(event.currentTarget.value.trimStart());
+        };
+
+    return (
+        <>
+            {showAvatarModal ? (
+                <AvatarCustomization
+                    setShowAvatarModal={setShowAvatarModal}
+                    setAvatarUriTrigger={setAvatarUriTrigger}
+                />
+            ) : null}
+            <div className="flex flex-col items-start px-4 md:sticky md:top-0 md:pt-20">
+                <h1 className="text-2xl font-medium">Profile</h1>
+                {/* Avatar */}
+                <button
+                    className="group relative"
+                    onClick={() => setShowAvatarModal(true)}
+                >
+                    <div className="h-36 w-36 overflow-hidden rounded-lg">
+                        {avatarUri === "" ? (
+                            <div className="h-1/3 w-1/3 text-primaryColor">
+                                <SpinnerSVG />
+                            </div>
+                        ) : (
+                            <img className="h-full w-full" src={avatarUri} />
+                        )}
+                    </div>
+                    <div className="absolute -right-3 -top-3 flex rounded-full bg-bgColor2 p-2 group-hover:bg-bgColor3">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                            fill="currentColor"
+                            className="size-5"
+                        >
+                            <path d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z" />
+                        </svg>
+                    </div>
+                </button>
+
+                {/* User name */}
+                <Form onSubmit={submitNameEdit} className="mt-6">
+                    <input
+                        className="w-full max-w-52 rounded-md bg-bgColor2 px-2 py-1 text-xl text-textColor1 disabled:cursor-not-allowed disabled:text-textColor2"
+                        type="text"
+                        onChange={onChangeNameEdit}
+                        value={nameValue}
+                        disabled={!enableNameEdit}
+                        required
+                    />
+                    <div className="mt-2 flex">
+                        {enableNameEdit ? (
+                            <>
+                                <button
+                                    className="click-shrink rounded-md bg-bgColor2 px-2 py-1 hover:bg-bgColor3"
+                                    type="button"
+                                    onClick={cancelNameEdit}
+                                >
+                                    Cancel
+                                </button>
+                                <button
+                                    className="click-shrink ms-2 rounded-md bg-bgColor2 px-2 py-1 hover:bg-bgColor3"
+                                    type="submit"
+                                >
+                                    Save
+                                </button>
+                            </>
+                        ) : (
+                            <button
+                                className="click-shrink flex items-center rounded-md bg-bgColor2 px-2 py-1 hover:bg-bgColor3"
+                                type="button"
+                                onClick={() => setEnableNameEdit(true)}
+                            >
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 24 24"
+                                    fill="currentColor"
+                                    className="size-4"
+                                >
+                                    <path d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z" />
+                                </svg>
+                                <span className="text-md ms-1">Edit name</span>
+                            </button>
+                        )}
+                    </div>
+                </Form>
+            </div>
+        </>
+    );
+}
diff --git a/app/routes/profile/reviews/MyReviews.tsx b/app/routes/profile/reviews/MyReviews.tsx
new file mode 100644
index 0000000..e053adc
--- /dev/null
+++ b/app/routes/profile/reviews/MyReviews.tsx
@@ -0,0 +1,46 @@
+import { useOutletContext } from "@remix-run/react";
+import { Tables } from "database.types";
+import { useEffect, useState } from "react";
+import { ContextProps } from "~/utils/types/ContextProps.type";
+import ReviewItem from "./ReviewItem";
+
+export type MyReview = Tables<"REVIEWS"> & {
+    product: { title: string } | null;
+};
+
+export default function MyReviews() {
+    const { supabase, user, addNotification } =
+        useOutletContext<ContextProps>();
+    const [reviews, setReviews] = useState<MyReview[]>([]);
+
+    useEffect(() => {
+        if (!user) return;
+        (async function () {
+            const { data: reviewsData, error } = await supabase
+                .from("REVIEWS")
+                .select(`*, product:PRODUCTS(title)`)
+                .order("created_at", { ascending: false })
+                .eq("user_id", user.id);
+            if (error) {
+                console.error("Error fetching reviews", error);
+                addNotification("Error fetching reviews", "FAIL");
+                return;
+            }
+
+            setReviews(reviewsData);
+        })();
+    }, []);
+
+    return (
+        <div className="mt-6 w-full">
+            <h1 className="mb-2 text-2xl font-medium text-textColor1">
+                My reviews
+            </h1>
+            <div className="flex flex-col">
+                {reviews.map((r) => (
+                    <ReviewItem review={r} key={r.id} />
+                ))}
+            </div>
+        </div>
+    );
+}
diff --git a/app/routes/profile/reviews/ReviewItem.tsx b/app/routes/profile/reviews/ReviewItem.tsx
new file mode 100644
index 0000000..e7c7bc1
--- /dev/null
+++ b/app/routes/profile/reviews/ReviewItem.tsx
@@ -0,0 +1,126 @@
+import { Link, useOutletContext } from "@remix-run/react";
+import { Tables } from "database.types";
+import { useEffect, useState } from "react";
+import { ContextProps } from "~/utils/types/ContextProps.type";
+import { MyReview } from "./MyReviews";
+import SpinnerSVG from "~/components/SpinnerSVG";
+
+type Props = {
+    review: MyReview;
+};
+
+export default function ReviewItem({ review }: Props) {
+    const { supabase, env, addNotification } = useOutletContext<ContextProps>();
+
+    const [imgName, setImgName] = useState<string | null>(null);
+    const [imgIsLoaded, setImgIsLoaded] = useState<boolean>(false);
+
+    // fetch image
+    useEffect(() => {
+        (async function () {
+            // fetch first image of product
+            const { data: fetchedImageData, error: imageError } =
+                await supabase.storage
+                    .from("product_images")
+                    .list(review.product_id.toLocaleString(), {
+                        limit: 1,
+                        sortBy: { column: "name", order: "asc" },
+                    });
+
+            if (imageError) {
+                const errorMessage =
+                    "Error fetching image for " + review.product?.title;
+                console.error(errorMessage, imageError);
+                addNotification(errorMessage, "FAIL");
+                return;
+            }
+
+            if (fetchedImageData.length > 0) {
+                setImgName(fetchedImageData[0].name);
+            }
+        })();
+    }, []);
+
+    const imgSrc = `${env.SUPABASE_IMAGES_PATH}/${review.product_id}/${imgName}`;
+
+    return (
+        <div className="my-1 flex h-28 overflow-hidden rounded-md bg-bgColor2 lg:mx-2">
+            {/* Product image */}
+            <div className="flex max-h-28 min-h-28 min-w-28 max-w-28">
+                <div className="flex w-full items-center justify-center">
+                    {imgName === null || !imgIsLoaded ? (
+                        <div className="h-1/3 w-1/3 text-primaryColor">
+                            <SpinnerSVG />
+                        </div>
+                    ) : null}
+                    {imgName !== null ? (
+                        <img
+                            className={`${imgIsLoaded ? "" : "hidden"} w-full`}
+                            src={imgSrc}
+                            onLoad={() => setImgIsLoaded(true)}
+                        />
+                    ) : null}
+                </div>
+            </div>
+
+            <div className="flex overflow-hidden py-2 pl-3">
+                <div className="flex flex-col items-start overflow-auto">
+                    {/* Product title */}
+                    <Link
+                        to={`/product/${review.product_id}`}
+                        className="cursor-pointer text-lg leading-none underline hover:text-primaryColor sm:text-xl"
+                    >
+                        {review.product?.title}
+                    </Link>
+
+                    {/* Rating */}
+                    <div className="flex items-center py-2">
+                        {[1, 2, 3, 4, 5].map((num) => {
+                            const isEmpty = num > review.rating;
+                            return (
+                                <div key={num} className="">
+                                    {isEmpty ? emptyStar : filledStar}
+                                </div>
+                            );
+                        })}
+                    </div>
+
+                    {/* Feedback */}
+                    <p className="">{review.feedback}</p>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+const filledStar = (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className="size-5 text-orange-500 dark:text-yellow-400"
+    >
+        <path
+            fillRule="evenodd"
+            d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+const emptyStar = (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className="size-5 text-orange-500 dark:text-yellow-400"
+    >
+        <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
+        />
+    </svg>
+);
diff --git a/app/routes/wishlist/index.tsx b/app/routes/profile/wishlist/MyWishlist.tsx
similarity index 57%
rename from app/routes/wishlist/index.tsx
rename to app/routes/profile/wishlist/MyWishlist.tsx
index 5332387..e0a96af 100644
--- a/app/routes/wishlist/index.tsx
+++ b/app/routes/profile/wishlist/MyWishlist.tsx
@@ -1,19 +1,19 @@
 import { useOutletContext } from "@remix-run/react";
 import { useEffect, useState } from "react";
 import { ContextProps } from "~/utils/types/ContextProps.type";
-import ProductItem from "./ProductItem";
-import { Tables } from "database.types";
+import ProductItem, { WishlistProduct } from "./ProductItem";
 
-export default function WishlistPage() {
-    const { supabase, user, wishlist, setWishlist } =
+export default function MyWishlist() {
+    const { supabase, user, setWishlist, addNotification } =
         useOutletContext<ContextProps>();
 
-    const [products, setProducts] = useState<Tables<"PRODUCTS">[]>([]);
+    const [products, setProducts] = useState<WishlistProduct[]>([]);
 
+    // refetch wishlist and fetch products
     useEffect(() => {
         if (!user) return;
         (async function () {
-            // fetch wishlist again
+            // refetch wishlist
             const { data: wishlistData, error: wishlistError } = await supabase
                 .from("WISHLIST")
                 .select("product_id")
@@ -22,6 +22,7 @@ export default function WishlistPage() {
 
             if (wishlistError) {
                 console.error("Error fetching wishlist", wishlistError);
+                addNotification("Error fetching wishlist", "FAIL");
                 return;
             }
 
@@ -31,18 +32,19 @@ export default function WishlistPage() {
             // fetch products
             const { data: productsData, error: productsError } = await supabase
                 .from("PRODUCTS")
-                .select("*")
+                .select("id, title")
                 .in("id", newWishlist);
 
             if (productsError) {
                 console.error(
-                    "Error fetching wishlisted products",
+                    "Error fetching wishlist products",
                     productsError,
                 );
+                addNotification("Error fetching wishlist products", "FAIL");
                 return;
             }
             // order products by wishlist order
-            const orderedProducts: Tables<"PRODUCTS">[] = [];
+            const orderedProducts: WishlistProduct[] = [];
             for (let wi = 0; wi < newWishlist.length; wi++) {
                 for (let pi = 0; pi < productsData.length; pi++) {
                     const product = productsData[pi];
@@ -56,20 +58,26 @@ export default function WishlistPage() {
         })();
     }, []);
 
-    if (!user) {
-        return <p>Log in to see your wishlist</p>;
-    }
-
     return (
-        <div>
-            <h1>
-                Wishlist ({wishlist.length}); Products ({products.length})
+        <div className="w-full">
+            <h1 className="mb-2 text-2xl font-medium text-textColor1">
+                My wishlist
             </h1>
-            {/* ///// user remove action: remove from wishlist AND from products */}
 
-            {products.map((product) => (
-                <ProductItem key={product.id} product={product} />
-            ))}
+            {products.length === 0 ? (
+                <p>Wishlist is empty.</p>
+            ) : (
+                <div className="flex flex-wrap">
+                    {products.map((product) => (
+                        <ProductItem
+                            key={product.id}
+                            product={product}
+                            setProducts={setProducts}
+                            products={products}
+                        />
+                    ))}
+                </div>
+            )}
         </div>
     );
 }
diff --git a/app/routes/profile/wishlist/ProductItem.tsx b/app/routes/profile/wishlist/ProductItem.tsx
new file mode 100644
index 0000000..b4e9767
--- /dev/null
+++ b/app/routes/profile/wishlist/ProductItem.tsx
@@ -0,0 +1,123 @@
+import { Link, useOutletContext } from "@remix-run/react";
+import { useEffect, useState, MouseEvent } from "react";
+import SpinnerSVG from "~/components/SpinnerSVG";
+import { ContextProps } from "~/utils/types/ContextProps.type";
+
+export type WishlistProduct = {
+    id: number;
+    title: string;
+};
+
+type Props = {
+    setProducts: SetState<WishlistProduct[]>;
+    products: WishlistProduct[];
+    product: WishlistProduct;
+};
+
+export default function ProductItem({ setProducts, products, product }: Props) {
+    const { supabase, env, user, setWishlist, wishlist, addNotification } =
+        useOutletContext<ContextProps>();
+
+    const [imgName, setImgName] = useState<string | null>(null);
+    const [imgIsLoaded, setImgIsLoaded] = useState<boolean>(false);
+    const [isRemoving, setIsRemoving] = useState<boolean>(false);
+
+    // fetch image
+    useEffect(() => {
+        (async function () {
+            // fetch first image of product
+            const { data: fetchedImageData, error: imageError } =
+                await supabase.storage
+                    .from("product_images")
+                    .list(product.id.toLocaleString(), {
+                        limit: 1,
+                        sortBy: { column: "name", order: "asc" },
+                    });
+
+            if (imageError) {
+                const errorMessage =
+                    "Error fetching image for " + product.title;
+                console.error(errorMessage, imageError);
+                addNotification(errorMessage, "FAIL");
+                return;
+            }
+
+            if (fetchedImageData.length > 0) {
+                setImgName(fetchedImageData[0].name);
+            }
+        })();
+    }, []);
+
+    async function removeFromWishlist(event: MouseEvent) {
+        if (!user) return;
+
+        setIsRemoving(true);
+        const { error: deleteError } = await supabase
+            .from("WISHLIST")
+            .delete()
+            .eq("user_id", user.id)
+            .eq("product_id", product.id);
+
+        if (deleteError) {
+            console.error("Un-wishlist failed:", deleteError);
+            addNotification("Un-wishlist failed:", "FAIL");
+            return;
+        }
+
+        setWishlist(wishlist.filter((wi) => wi !== product.id));
+        setProducts(products.filter((p) => p.id !== product.id));
+        addNotification("Removed from wishlist", "SUCCESS");
+    }
+
+    const imgSrc = `${env.SUPABASE_IMAGES_PATH}/${product.id}/${imgName}`;
+    return (
+        <div className={`${isRemoving ? "opacity-50" : ""} w-full lg:w-1/2`}>
+            <div className="my-1 flex items-center overflow-hidden rounded-md bg-bgColor2 lg:mx-2">
+                {/* Product image */}
+                <div className="flex h-16 w-16">
+                    <div className="flex w-full items-center justify-center">
+                        {imgName === null || !imgIsLoaded ? (
+                            <div className="h-1/3 w-1/3 text-primaryColor">
+                                <SpinnerSVG />
+                            </div>
+                        ) : null}
+                        {imgName !== null ? (
+                            <img
+                                className={`${imgIsLoaded ? "" : "hidden"} w-full`}
+                                src={imgSrc}
+                                onLoad={() => setImgIsLoaded(true)}
+                            />
+                        ) : null}
+                    </div>
+                </div>
+
+                {/* Product title */}
+                <Link
+                    to={`/product/${product.id}`}
+                    className="ms-1 cursor-pointer text-lg leading-none underline hover:text-primaryColor sm:ms-3 sm:text-xl"
+                >
+                    {product.title}
+                </Link>
+
+                {/* Heart button */}
+                <div className="flex flex-grow justify-end px-3">
+                    <button
+                        className="click-shrink text-textColor1 hover:text-textColor2"
+                        onClick={removeFromWishlist}
+                        title="Remove"
+                        disabled={isRemoving}
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            className="size-6"
+                        >
+                            <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/app/routes/store/ProductCard.tsx b/app/routes/store/ProductCard.tsx
index 7b85df7..c2bf6df 100644
--- a/app/routes/store/ProductCard.tsx
+++ b/app/routes/store/ProductCard.tsx
@@ -83,7 +83,7 @@ export default function ProductCard({ product }: Props) {
     }
 
     async function addToWishlist(e: MouseEvent) {
-        e.stopPropagation();
+        e.preventDefault();
 
         if (!user) {
             return navigate("/login");
@@ -204,7 +204,7 @@ export default function ProductCard({ product }: Props) {
                         disabled={isInCart || outOfStock}
                         onClick={addToCart}
                     >
-                        <span className="text-md flex justify-center py-2 sm:text-xl">
+                        <span className="text-md flex justify-center py-2 text-textColor2 sm:text-xl">
                             {isInCart
                                 ? "In cart"
                                 : outOfStock
@@ -227,7 +227,7 @@ const renderAddToCartText = function (isAddingToCart: boolean) {
         );
     }
     return (
-        <div className="flex flex-row items-center px-2">
+        <div className="flex flex-row items-center px-2 text-primaryTextColor">
             <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
diff --git a/app/routes/store/TagsFilter.tsx b/app/routes/store/TagsFilter.tsx
index f57912b..a12f7da 100644
--- a/app/routes/store/TagsFilter.tsx
+++ b/app/routes/store/TagsFilter.tsx
@@ -49,7 +49,7 @@ export default function TagsFilter({
         <>
             <div className="flex flex-wrap items-center gap-x-1 gap-y-2">
                 <button
-                    className="btn text-md mr-2 flex flex-row px-2 py-2"
+                    className="text-md mr-2 flex flex-row rounded-md bg-primaryColor px-2 py-2 font-medium text-primaryTextColor hover:bg-primaryColorMuted"
                     onClick={() => setShowTagsModal(!showTagsModal)}
                 >
                     <svg
@@ -99,9 +99,10 @@ export default function TagsFilter({
             </div>
 
             {showTagsModal ? (
-                <div className="fixed inset-0 z-50 flex items-center justify-center">
-                    <div className="z-50 mx-4 flex h-80 w-full max-w-[600px] flex-col rounded-lg border-2 border-bgColor3 bg-bgColor1">
-                        <div className="flex w-full flex-row border-b-2 border-bgColor3">
+                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
+                    <div className="z-50 mx-4 flex h-80 w-full max-w-[600px] flex-col rounded-lg border-2 border-textColor2 bg-bgColor1">
+                        {/* Modal header */}
+                        <div className="flex w-full flex-row border-b-2 border-textColor2">
                             <h1 className="px-4 py-2 text-2xl">Tags</h1>
                             <button
                                 className="ml-auto mr-4 text-textColor1 hover:text-primaryColor"
@@ -125,7 +126,7 @@ export default function TagsFilter({
                         </div>
 
                         {allTags.length === 0 ? (
-                            <p>No tags found</p>
+                            <p className="w-full p-2">No tags found</p>
                         ) : (
                             <div className="flex flex-wrap items-center gap-2 overflow-y-auto p-5">
                                 {allTags.map((tag) => {
diff --git a/app/routes/wishlist/ProductItem.tsx b/app/routes/wishlist/ProductItem.tsx
deleted file mode 100644
index 5c4669c..0000000
--- a/app/routes/wishlist/ProductItem.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Tables } from "database.types";
-
-type Props = {
-    product: Tables<"PRODUCTS">;
-};
-
-export default function ProductItem({ product }: Props) {
-    return <div>title: {product.title}</div>;
-}
diff --git a/app/tailwind.css b/app/tailwind.css
index 3475de4..4552459 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -25,7 +25,7 @@
     }
 
     body {
-        @apply overflow-y-scroll bg-bgColor1 font-sans text-textColor1 transition-colors;
+        @apply flex min-h-[100vh] flex-col overflow-y-scroll bg-bgColor1 font-sans text-textColor1 transition-colors;
     }
 
     input[type="number"]::-webkit-inner-spin-button,
@@ -36,10 +36,6 @@
 }
 
 /* CUSTOM CLASSES */
-.btn {
-    @apply click-shrink rounded-md enabled:bg-primaryColor enabled:font-medium enabled:text-primaryTextColor enabled:hover:bg-primaryColorMuted;
-}
-
 .absolute-center {
     @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform;
 }
@@ -70,7 +66,7 @@
 }
 /* Handle */
 ::-webkit-scrollbar-thumb {
-    @apply bg-primaryColorMuted;
+    @apply bg-primaryColor;
 }
 /* PAGE LOADING PROGRESS BAR (mobile) */
 ::-webkit-progress-value {
diff --git a/database.types.ts b/database.types.ts
index 4d77cee..e70f6ae 100644
--- a/database.types.ts
+++ b/database.types.ts
@@ -144,7 +144,7 @@ export type Database = {
       ORDERS_ITEMS: {
         Row: {
           id: number
-          order_id: number | null
+          order_id: number
           product_id: number | null
           quantity: number
           subtotal: number
@@ -152,7 +152,7 @@ export type Database = {
         }
         Insert: {
           id?: number
-          order_id?: number | null
+          order_id: number
           product_id?: number | null
           quantity?: number
           subtotal: number
@@ -160,7 +160,7 @@ export type Database = {
         }
         Update: {
           id?: number
-          order_id?: number | null
+          order_id?: number
           product_id?: number | null
           quantity?: number
           subtotal?: number
@@ -251,15 +251,15 @@ export type Database = {
       }
       PROFILES: {
         Row: {
-          display_name: string | null
+          display_name: string
           id: string
         }
         Insert: {
-          display_name?: string | null
+          display_name?: string
           id?: string
         }
         Update: {
-          display_name?: string | null
+          display_name?: string
           id?: string
         }
         Relationships: [
@@ -277,25 +277,25 @@ export type Database = {
           created_at: string
           feedback: string
           id: number
-          product_id: number | null
+          product_id: number
           rating: number
-          user_id: string | null
+          user_id: string
         }
         Insert: {
           created_at?: string
           feedback?: string
           id?: number
-          product_id?: number | null
+          product_id: number
           rating?: number
-          user_id?: string | null
+          user_id?: string
         }
         Update: {
           created_at?: string
           feedback?: string
           id?: number
-          product_id?: number | null
+          product_id?: number
           rating?: number
-          user_id?: string | null
+          user_id?: string
         }
         Relationships: [
           {