diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
new file mode 100644
index 0000000..6fbd4c5
--- /dev/null
+++ b/src/pages/Profile.tsx
@@ -0,0 +1,25 @@
+import ReactCountryFlag from "react-country-flag";
+
+const Profile = () => {
+ const srcImage = "/assets/images/man.png";
+ return (
+
+
+
+
+
Profile
+
John Doe
+
1K Followers
+
+
+
+
+ );
+};
+
+export default Profile;
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
new file mode 100644
index 0000000..dd74506
--- /dev/null
+++ b/src/pages/Settings.tsx
@@ -0,0 +1,181 @@
+import SearchIcon from "@mui/icons-material/Search";
+
+const Settings = () => {
+ return (
+
+
+
+ Settings
+
+
+
+
+
Language
+
+
+ Choose language - Changes will be applied after restarting the app
+
+
+
+
+
+
Explicit Content
+
+
Allow playback of explicit-rated content
+
+
+
+
+
Autoplay
+
+
+ Enjoy nonstop listening. When your audio ends, we'll play you
+ something similar
+
+
+
+
+
+
Audio Quality
+
+
Streaming quality
+
+
+
+
Download
+
+
+
+
+ Auto adjust quality - Recommended setting: On
+
+
+
+
+
+ Normalize volume - Set the same volume level for all songs and
+ podcast s
+
+
+
+
+
+ Volume level - Adjust the volume for your environment. Loud may{" "}
+ diminish audio quality. No effect on audio quality in Normal or
+ Quiet
+
+
+
+
+
+
+
Display
+
+
+
+ Show the now-playing panel on click of play
+
+
+
+
+
Show announcements about new releases
+
+
+
+
+ Show desktop notifications when the song changes
+
+
+
+
+
See what your friends are playing
+
+
+
+
+
+
Social
+
+
+
Publish my new playlists on my profile
+
+
+
+
Start a private session
+
+
+
+
Share my listening activity on Spotify
+
+
+
+
+ Show my recently played artists on my public profile
+
+
+
+
+
+
+
Playback
+
+
+
+
+ Automix - Allow seamless transition between songs on select
+ playlists
+
+
+
+
+
+ Mono audio - Makes left and right speakers play the same audio
+
+
+
+
+
+ Show my recently played artists on my public profile
+
+
+
+
+
+
+ );
+};
+
+export default Settings;
diff --git a/src/pages/tests/Profile.test.tsx b/src/pages/tests/Profile.test.tsx
new file mode 100644
index 0000000..80748e3
--- /dev/null
+++ b/src/pages/tests/Profile.test.tsx
@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, expect } from "vitest";
+import { BrowserRouter } from "react-router-dom";
+import { AuthContext } from "../../context/AuthContext";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import Profile from "../Profile.tsx";
+
+describe("Profile Component", () => {
+ const mockAuthContext = {
+ accessToken: "mockAccessToken",
+ login: async () => {},
+ logout: () => {},
+ refreshToken: "mockRefresh",
+ };
+ const profileComponent = () => {
+ const queryClient = new QueryClient();
+ render(
+
+
+
+
+
+
+ ,
+ ,
+ );
+ };
+ it("renders without crashing", () => {
+ profileComponent();
+ expect(screen.getByTestId("profile-card-element")).toBeInTheDocument();
+ });
+
+ it("contains a profile image", () => {
+ profileComponent();
+ expect(screen.getByTestId("profile-img-element")).toBeInTheDocument();
+ });
+});
diff --git a/src/pages/tests/Settings.test.tsx b/src/pages/tests/Settings.test.tsx
new file mode 100644
index 0000000..85aec45
--- /dev/null
+++ b/src/pages/tests/Settings.test.tsx
@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, expect } from "vitest";
+import { BrowserRouter } from "react-router-dom";
+import { AuthContext } from "../../context/AuthContext";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import Settings from "../Settings.tsx";
+
+describe("Settings Component", () => {
+ const mockAuthContext = {
+ accessToken: "mockAccessToken",
+ login: async () => {},
+ logout: () => {},
+ refreshToken: "mockRefresh",
+ };
+ const settingsComponent = () => {
+ const queryClient = new QueryClient();
+ render(
+
+
+
+
+
+
+ ,
+ ,
+ );
+ };
+ it("renders without crashing", () => {
+ settingsComponent();
+ expect(screen.getByTestId("settings-element")).toBeInTheDocument();
+ });
+
+ it("contains a profile image", () => {
+ settingsComponent();
+ expect(screen.getByTestId("lanaguage-select-element")).toBeInTheDocument();
+ });
+});