frontend/src/App.tsx

@@ -11,6 +11,10 @@ import { MoviePage } from "./components/MoviePage";
 import { DirectorPage } from "./components/DirectorPage";
 import { BrowseDirectors } from "./components/BrowseDirectors";
 
+export const mainColor = "#69c0ff"
+export const middleColor = "#bae7ff"
+export const sideColor = "#e6f7ff"
+
 function App() {
   return (
     <div className="app">

frontend/src/components/BrowseMovies.tsx

@@ -8,6 +8,7 @@ import {
 import Meta from "antd/lib/card/Meta";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
+import { mainColor, middleColor, sideColor } from "../App";
 import axiosConfig from "../axios-config";
 import { CategoryDTO } from "../dto";
 import { ErrorPage } from "./ErrorPage";
@@ -39,7 +40,7 @@ export const BrowseMovies = () => {
   return (
     <div className="browse-container">
       <Space direction="vertical" style={{ padding: "3rem", display: "flex"}} >
-        <Collapse >
+        <Collapse style={{background: sideColor}}>
           {categories.map((category) => {
             return (
               <Panel header={category.name} key={category.id}>
@@ -74,7 +75,7 @@ export const BrowseMovies = () => {
                             cover={
                               <Image
                                 width={"16rem"}
-                                style={{ objectFit: "cover" }}
+                                style={{ objectFit: "cover"}}
                                 src={movie.picture}
                               ></Image>
                             }

frontend/src/components/MoviePage.tsx

@@ -44,7 +44,7 @@ export const MoviePage = () => {
       <Descriptions
         title={movie.name}
         bordered
-        style={{ padding: "5%" }}
+        style={{ padding: "5%",}}
       >
         <Descriptions.Item label="Title picture" span={3}>
           <Image height={400} src={movie.picture}></Image>

frontend/src/components/PreviewBox.tsx

 import { Card, Col, Row } from "antd";
 import Meta from "antd/lib/card/Meta";
 import { Link } from "react-router-dom";
+import { mainColor, middleColor, sideColor } from "../App";
 import { MovieDTO } from "../dto";
 
 interface IPreviewBoxProps {
@@ -9,8 +10,10 @@ interface IPreviewBoxProps {
 }
 
 export const PreviewBox: React.FC<IPreviewBoxProps> = ({ title, movies }) => {
+  
+  
   return (
-    <Card title={title}>
+    <Card title={title}  style={{ borderWidth: 4, borderColor:mainColor, background: sideColor, borderRadius: "10px",}}>
       <Row justify="space-evenly" align="bottom" gutter={50}>
         {movies.map((movie) => {
           return (
@@ -20,6 +23,9 @@ export const PreviewBox: React.FC<IPreviewBoxProps> = ({ title, movies }) => {
                   hoverable
                   style={{
                     width: "240px",
+                    borderWidth: "2px",
+                    borderRadius: "5px",
+                    borderColor: middleColor
                   }}
                   cover={<img alt={movie.name} src={movie.picture} />}
                 >