diff --git a/README.md b/README.md
index ffea141..457f829 100644
--- a/README.md
+++ b/README.md
@@ -130,6 +130,10 @@ For checking ESLint run ```npm run lint```.
 
 We have not yet set up the database for this project.
 
+## Scalability
+Phone size = 390 px × 844 px
+Tablet size = 768 px × 1024
+
 ## Tests
 
 To run tests, open the terminal and ```run npx vitest```. To test with coverage, install ```npm install -D @vitest/coverage-v8``` and run ```npx vitest --coverage``` to include coverage. Per now, since there is no logic on the application pages, we have only written tests for the api.
diff --git a/src/components/header.tsx b/src/components/header.tsx
index cdfc9a1..79a43ba 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -18,7 +18,7 @@ export default function Header() {
     ]
 
     return (
-        <div>
+        <div className="headerWrapper">
             <header>
                 <div id="logo">
                     <Link to="/" aria-label="GameStart home">
@@ -56,7 +56,7 @@ export default function Header() {
                     )}
                 </div>
             </header>
-            <Divider />
+            <Divider className="headerDivider" />
         </div>
     )
 }
diff --git a/src/css/footer.css b/src/css/footer.css
index e3f5bb1..998f5bf 100644
--- a/src/css/footer.css
+++ b/src/css/footer.css
@@ -1,13 +1,14 @@
- .footerWrapper {
+.footerWrapper {
     width: 100%;
     flex: 0 0 auto;
     margin-top: auto;
 }
 
 footer {
-    height: 4rem;
-    flex: 0 0 4rem;
+    box-sizing: border-box;
     width: 100%;
+    min-height: 4rem;
+    padding: 0.75rem clamp(1rem, 4vw, 2rem);
     background-color: var(--secondary-background-color);
     display: flex;
     align-items: center;
@@ -17,12 +18,38 @@ footer {
 footer h1 {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    justify-content: center;
+    gap: clamp(0.4rem, 1.5vw, 0.75rem);
     margin: 0;
-    font-size: 1rem;
+    font-size: clamp(0.85rem, 2vw, 1rem);
 }
 
 .footerBrandLogo {
     height: 1.5rem;
     width: auto;
+    height: clamp(1.25rem, 4vw, 1.5rem);
+}
+
+/* Scalability */
+
+/* Tablet size */
+@media (max-width: 1032) {
+    footer {
+        min-height: 3.5rem;
+    }
+}
+/* Phone size */
+@media (max-width: 393px) {
+    footer {
+        min-height: 3rem;
+        padding-inline: 0.75rem;
+    }
+
+    footer h1 {
+        font-size: 0.85rem;
+    }
+
+    .footerBrandLogo {
+        height: 1.2rem;
+    }
 }
diff --git a/src/css/header.css b/src/css/header.css
index 098e825..9e38999 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -1,6 +1,8 @@
 header {
-    height: 5em;
+    box-sizing: border-box;
     width: 100%;
+    min-height: 5rem;
+    padding: 0.75rem clamp(1rem, 3vw, 2rem);
     background-color: var(--secondary-background-color);
     display: flex;
     align-items: center;
@@ -8,14 +10,13 @@ header {
 
 #logo {
     margin: 0;
-    padding-left: 2rem;
+    padding: 0;
+    flex-shrink: 0;
 }
 
-#logo h1 {
+#logo a {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    margin: 0;
 }
 
 #logo a {
@@ -24,15 +25,17 @@ header {
 }
 
 .headerBrandLogo {
-    height: 2.5rem;
+    display: block;
     width: auto;
+    height: clamp(1.75rem, 4vw, 2.5rem);
 }
 
 #navigationMenue {
     display: flex;
-    gap: 0.5rem;
+    align-items: center;
+    gap: clamp(0.25rem, 1vw, 0.75rem);
     margin-left: auto;
-    padding: 0 1rem;
+    padding: 0;
 }
 
 #navigationMenue a {
@@ -42,6 +45,14 @@ header {
     padding: 0.5rem;
     color: var(--primary-text-color);
     text-decoration: none;
+    white-space: nowrap;
+    font-size: clamp(0.8rem, 1.4vw, 1rem);
+}
+
+#navigationMenue a svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
 }
 
 #navigationMenue a.is-active {
@@ -58,3 +69,62 @@ header > button {
     color: var(--primary-text-color);
     cursor: pointer;
 }
+
+.headerWrapper {
+    box-sizing: border-box;
+    width: 100%;
+    align-self: stretch;
+}
+
+.headerDivider {
+    width: 100vw;
+}
+
+/*Scalability*/
+/* Tablet */
+@media (max-width: 1032px) {
+    header {
+        min-height: 4.5rem;
+    }
+
+    #navigationMenue {
+        gap: 0.15rem;
+    }
+
+    #navigationMenue a {
+        gap: 0.25rem;
+        padding: 0.4rem;
+    }
+}
+
+/* Phone */
+@media (max-width: 620px) {
+    header {
+        flex-direction: column;
+        justify-content: center;
+        gap: 0.5rem;
+        padding: 0.75rem 0.5rem;
+    }
+
+    #navigationMenue {
+        display: grid;
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+        width: 100%;
+        margin-left: 0;
+        gap: 0.25rem;
+    }
+
+    #navigationMenue a {
+        flex-direction: column;
+        justify-content: center;
+        gap: 0.2rem;
+        min-width: 0;
+        padding: 0.35rem 0.1rem;
+        font-size: 0.7rem;
+    }
+
+    #navigationMenue a svg {
+        width: 1.15rem;
+        height: 1.15rem;
+    }
+}
diff --git a/src/css/pageheading.css b/src/css/pageheading.css
index 5786b55..a8f10e9 100644
--- a/src/css/pageheading.css
+++ b/src/css/pageheading.css
@@ -3,14 +3,15 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 1.5rem;
+    gap: clamp(0.75rem, 2vw, 1.5rem);
     width: min(calc(100% - 3rem), 75rem);
-    margin: 1.75rem auto 1.5rem;
+    margin: clamp(1.25rem, 4vw, 1.75rem) auto clamp(1rem, 3vw, 1.5rem);
 }
 
 .pageHeadingTitleGroup {
     display: flex;
     align-items: center;
+    flex: 1 1 auto;
     gap: 0.75rem;
     min-width: 0;
 }
@@ -50,29 +51,38 @@
 
 .pageHeadingTitle {
     margin: 0;
-    font-size: 2rem;
+    min-width: 0;
+    font-size: clamp(1.5rem, 4vw, 2rem);
     line-height: 1.2;
+    overflow-wrap: anywhere;
 }
 
 .pageHeadingActions {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    flex: 0 1 auto;
+    gap: clamp(0.5rem, 1.5vw, 0.75rem);
 }
 
-@media (max-width: 43.75rem) {
+/*Scalability*/
+/* Phone */
+@media (max-width: 620px) {
     .pageHeading {
-        width: min(calc(100% - 2rem), 32rem);
-        margin: 1.25rem auto;
         flex-wrap: wrap;
+        width: min(calc(100% - 2rem), 32rem);
         gap: 0.75rem;
     }
 
+    .pageHeadingTitleGroup {
+        flex-basis: 100%;
+    }
+
     .pageHeadingTitle {
-        font-size: 1.75rem;
+        font-size: clamp(1.35rem, 6vw, 1.75rem);
     }
 
     .pageHeadingActions {
+        flex-wrap: wrap;
         max-width: 100%;
     }
 }
diff --git a/src/css/profilepage.css b/src/css/profilepage.css
index 5b216a3..d56aa7d 100644
--- a/src/css/profilepage.css
+++ b/src/css/profilepage.css
@@ -1,58 +1,97 @@
 .profileContent {
     box-sizing: border-box;
-    width: min(calc(100% - 3rem), 75rem);
+    width: min(calc(100% - 2rem), 75rem);
+    min-width: 0;
     margin: 0 auto;
-    padding-left: 3.25rem;
 }
 
 .profile-card.MuiCard-root {
+    box-sizing: border-box;
     background-color: var(--primary-background-color);
     border: 1px solid var(--secondary-component-color);
     width: 100%;
+    min-width: 0;
+    max-width: 100%;
     height: auto;
     display: flex;
     flex-direction: column;
-    margin-top: 0;
-    margin-bottom: 5rem;
-}
-
-@media (max-width: 43.75rem) {
-    .profileContent {
-        width: min(calc(100% - 2rem), 32rem);
-    }
+    margin: 0 0 clamp(2rem, 8vh, 5rem);
 }
 
 .profile-card .MuiDivider-root {
     align-self: stretch;
 }
 
+.profile-card .MuiCardContent-root {
+    box-sizing: border-box;
+    padding: clamp(1rem, 3vw, 1.5rem);
+    min-width: 0;
+}
+
 .user-avatar.MuiAvatar-root {
     background-color: var(--secondary-component-color);
     color: var(--primary-component-color);
-    height: 5rem;
-    width: 5rem;
-    font-size: 2rem;
+    height: clamp(3.5rem, 8vw, 5rem);
+    width: clamp(3.5rem, 8vw, 5rem);
+    flex: 0 0 auto;
+    font-size: clamp(1.5rem, 4vw, 2rem);
 }
 
 .user-icon {
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: clamp(0.75rem, 2vw, 1rem);
+    min-width: 0;
 }
 
 #user-name {
-    font-size: 3rem;
+    min-width: 0;
+    margin: 0;
+    font-size: clamp(1.75rem, 6vw, 3rem);
+    line-height: 1.15;
+    overflow-wrap: anywhere;
 }
 
 .user-details {
     display: flex;
-    flex-direction: row;
+    flex-wrap: wrap;
     align-items: baseline;
     gap: 0.75rem;
 }
 
+.user-details h3,
+.user-details p {
+    margin-block: 0.25rem;
+}
+
 .user-details-container.MuiCardContent-root {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: clamp(0.5rem, 2vw, 1rem);
+}
+
+/*Scalability*/
+/* Phone */
+@media (max-width: 620px) {
+    .profileContent {
+        width: min(calc(100% - 2rem), 32rem);
+    }
+
+    .profile-card .MuiCardContent-root {
+        padding: 1rem;
+    }
+
+    .user-description p {
+        margin-block: 0;
+        overflow-wrap: anywhere;
+    }
+
+    .user-details {
+        gap: 0.35rem 0.75rem;
+    }
+
+    .user-details h3,
+    .user-details p {
+        overflow-wrap: anywhere;
+    }
 }
diff --git a/src/css/searchpage.css b/src/css/searchpage.css
index 19e18db..43b5aed 100644
--- a/src/css/searchpage.css
+++ b/src/css/searchpage.css
@@ -1,8 +1,10 @@
 .searchbar.MuiPaper-root {
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     align-self: center;
-    width: min(30rem, calc(100% - 5rem));
+    width: min(480px, calc(100% - 32px));
+    min-width: 0;
     padding: 0;
     background-color: var(--secondary-component-color);
     border: 1px solid var(--primary-component-color);
@@ -11,6 +13,7 @@
 
 .searchinput.MuiInputBase-root {
     flex: 1;
+    min-width: 0;
     margin-left: 0.5rem;
 }
 
@@ -24,8 +27,9 @@
 }
 
 .filterbutton.MuiIconButton-root {
+    flex: 0 0 56px;
     height: 56px;
-    padding: 0 1rem;
+    padding: 0;
     border-left: 1px solid var(--primary-component-color);
     border-radius: 0 4px 4px 0;
 }
@@ -54,14 +58,15 @@
     align-self: center;
     justify-content: center;
     gap: 0.5rem;
-    width: min(30rem, calc(100% - 5rem));
-    padding: 1rem;
+    width: min(480px, calc(100% - 32px));
+    padding: 16px;
     border: 1px solid var(--primary-accent-color);
     border-top: 0;
 }
 
 .filtersection .MuiFormControl-root {
-    min-width: 140px;
+    flex: 1 1 200px;
+    min-width: min(100%, 140px);
 }
 
 @media (min-width: 600px) {
@@ -83,24 +88,33 @@
 
 .games-grid-searchpage {
     display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 4rem;
-    padding: 2rem;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
+    gap: clamp(16px, 3vw, 32px);
+    box-sizing: border-box;
+    padding: 24px 0;
     align-self: center;
-    width: min(calc(100% - 3rem), 68rem);
+    width: min(calc(100% - 32px), 1088px);
 }
 
 .pageinationSearch {
     align-self: center;
-    padding-bottom: 1rem;
+    max-width: 100%;
+    padding-bottom: 16px;
 }
 
 .pageinationSearchTop {
-    margin-top: 1.5rem;
+    max-width: 100%;
+    margin-top: 24px;
     align-self: center;
 }
 
 .filterOption.MuiMenuItem-root.Mui-selected:hover,
 .filterOption.MuiMenuItem-root.Mui-selected.Mui-focusVisible {
     background-color: var(--primary-component-color);
+}
+
+.pageinationSearch .MuiPagination-ul,
+.pageinationSearchTop .MuiPagination-ul {
+    flex-wrap: wrap;
+    justify-content: center;
 }
\ No newline at end of file
diff --git a/src/css/wishlistgamecard.css b/src/css/wishlistgamecard.css
index be001b6..74f463e 100644
--- a/src/css/wishlistgamecard.css
+++ b/src/css/wishlistgamecard.css
@@ -1,7 +1,9 @@
 .wishlistGameCard {
+    box-sizing: border-box;
     display: flex;
     align-items: stretch;
     width: 100%;
+    min-width: 0;
     border: 1px solid var(--primary-component-color);
     border-radius: 0.375rem;
     background-color: var(--primary-background-color);
@@ -92,18 +94,18 @@
 
 @media (max-width: 36rem) {
     .wishlistGameCardMedia {
-        flex-basis: 6rem;
-        width: 6rem;
-        height: 5.5rem;
+        flex-basis: 5rem;
+        width: 5rem;
+        height: 4.75rem;
     }
 
     .wishlistGameCardContent.MuiCardContent-root {
-        gap: 0.625rem;
-        padding: 0.75rem;
+        gap: 0.5rem;
+        padding: 0.5rem;
     }
 
     .wishlistGameCardContent.MuiCardContent-root:last-child {
-        padding-bottom: 0.75rem;
+        padding-bottom: 0.5rem;
     }
 
     .wishlistGameCardTitle {
@@ -115,7 +117,14 @@
     }
 
     .wishlistGameCardPriceAndRemove {
-    gap: 0.375rem;
-    padding: 0.75rem;
+        gap: 0.375rem;
+        padding: 0.5rem;
+    }
+
+    .removeFromWishlistbuttonWishlistPage.MuiButton-root {
+        min-width: 0;
+        padding: 0.375rem 0.5rem;
+        font-size: 0.8rem;
+        white-space: nowrap;
     }
 }
diff --git a/src/css/wishlistpage.css b/src/css/wishlistpage.css
index 0dbc43a..695ebd3 100644
--- a/src/css/wishlistpage.css
+++ b/src/css/wishlistpage.css
@@ -5,12 +5,13 @@
 }
 
 .wishlistPagination {
-    margin: 1rem 0;
+    margin: 16px 0;
+    max-width: 100%;
 }
 
 .games-grid-wishlist {
     display: grid;
-    gap: 1rem;
+    gap: 16px;
 }
 
 .sortingOptionWishlist.MuiMenuItem-root.Mui-selected,
@@ -23,13 +24,21 @@
 }
 
 .page-shell-wishlist .wishlistCard {
-    width: min(calc(100% - 3rem), 68rem);
+    width: min(calc(100% - 48px), 1088px);
     margin: 0 auto;
 }
 
-@media (max-width: 43.75rem) {
+@media (max-width: 700px) {
+    .page-shell-wishlist .pageHeadingTitleGroup {
+        flex-basis: 100%;
+    }
+
     .page-shell-wishlist .wishlistCard {
-        width: min(calc(100% - 2rem), 32rem);
+        width: min(calc(100% - 32px), 512px);
+    }
+
+    .wishlistPagination {
+        margin: 12px auto;
     }
 }