diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
new file mode 100644
index 00000000..42014037
--- /dev/null
+++ b/.idea/watcherTasks.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions">
+    <TaskOptions isEnabled="false">
+      <option name="arguments" value="$FileName$:$FileNameWithoutExtension$.css" />
+      <option name="checkSyntaxErrors" value="true" />
+      <option name="description" />
+      <option name="exitCodeBehavior" value="ERROR" />
+      <option name="fileExtension" value="scss" />
+      <option name="immediateSync" value="true" />
+      <option name="name" value="SCSS" />
+      <option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
+      <option name="outputFilters">
+        <array />
+      </option>
+      <option name="outputFromStdout" value="false" />
+      <option name="program" value="sass" />
+      <option name="runOnExternalChanges" value="true" />
+      <option name="scopeName" value="Project Files" />
+      <option name="trackOnlyRoot" value="true" />
+      <option name="workingDir" value="$FileDir$" />
+      <envs />
+    </TaskOptions>
+  </component>
+</project>
\ No newline at end of file
diff --git a/1ee157648b374c35b55ea4685a90ecbe.txt b/1ee157648b374c35b55ea4685a90ecbe.txt
deleted file mode 100644
index e69de29b..00000000
diff --git a/MovieVerse-Frontend/css/index.scss b/MovieVerse-Frontend/css/index.scss
new file mode 100644
index 00000000..786e8d13
--- /dev/null
+++ b/MovieVerse-Frontend/css/index.scss
@@ -0,0 +1,87 @@
+$font-family-poppins: "Poppins", sans-serif;
+$background-color-primary: #7378c5;
+$hover-color: #ff8623;
+$link-color: white;
+$link-hover-color: #f509d9;
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: url("../../images/universe-1.png") no-repeat center center fixed;
+  background-size: cover;
+  font-family: $font-family-poppins;
+  margin: 0;
+  align-content: center;
+  overflow-x: hidden;
+  min-height: 100vh;
+  overflow-y: auto;
+}
+
+%button-style {
+  background-color: $background-color-primary;
+  color: black;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  &:hover {
+    background-color: $hover-color;
+    transition: 0.3s ease-in;
+  }
+}
+
+#movie-match-btn {
+  @extend %button-style;
+  position: fixed;
+  bottom: 220px;
+  right: 20px;
+}
+
+#submit-comment {
+  @extend %button-style;
+  padding: 10px 15px;
+}
+
+%link-style {
+  color: $link-color;
+  text-decoration: underline;
+  &:hover {
+    color: $link-hover-color;
+  }
+}
+
+#cast-info, #similar-tv, #director-link {
+  @extend %link-style;
+}
+
+@mixin modal-style {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  margin-top: 5px;
+}
+
+.modal-header {
+  @include modal-style;
+}
+
+.comments-controls {
+  display: flex;
+  align-items: center;
+  button:disabled {
+    cursor: not-allowed;
+  }
+  &.justify-start {
+    justify-content: start;
+  }
+  &.justify-center {
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+  }
+}
diff --git a/MovieVerse-Frontend/css/navbar.scss b/MovieVerse-Frontend/css/navbar.scss
new file mode 100644
index 00000000..6ff9d8ec
--- /dev/null
+++ b/MovieVerse-Frontend/css/navbar.scss
@@ -0,0 +1,97 @@
+$breakpoint-mobile: 480px;
+$breakpoint-tablet: 768px;
+$breakpoint-desktop: 1024px;
+
+$navbar-background-color: #333;
+$navbar-text-color: #fff;
+$navbar-hover-color: #555;
+$mobile-menu-background-color: #222;
+
+@mixin responsive-visibility {
+  @media (max-width: $breakpoint-mobile) {
+    display: none;
+  }
+}
+
+.navbar {
+  background-color: $navbar-background-color;
+  color: $navbar-text-color;
+  padding: 1em;
+
+  .logo {
+    float: left;
+    font-size: 1.5em;
+    margin-right: 15px;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    float: right;
+
+    li {
+      display: inline;
+      margin-left: 15px;
+
+      a {
+        text-decoration: none;
+        color: $navbar-text-color;
+
+        &:hover {
+          color: $navbar-hover-color;
+        }
+      }
+    }
+  }
+
+  @media (max-width: $breakpoint-tablet) {
+    ul {
+      float: none;
+      text-align: center;
+
+      li {
+        display: block;
+        margin-top: 0.5em;
+      }
+    }
+  }
+}
+
+.mobile-menu-btn {
+  @include responsive-visibility;
+
+  display: inline-block;
+  background-color: $mobile-menu-background-color;
+  color: $navbar-text-color;
+  padding: 10px;
+  border: none;
+  cursor: pointer;
+}
+
+.mobile-menu {
+  display: none;
+
+  &.active {
+    display: block;
+    padding: 10px;
+    background-color: $mobile-menu-background-color;
+
+    ul {
+      text-align: center;
+
+      li {
+        margin-top: 10px;
+
+        a {
+          display: block;
+          color: $navbar-text-color;
+
+          &:hover {
+            background-color: $navbar-hover-color;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/MovieVerse-Frontend/css/profile.scss b/MovieVerse-Frontend/css/profile.scss
new file mode 100644
index 00000000..78f9b2e3
--- /dev/null
+++ b/MovieVerse-Frontend/css/profile.scss
@@ -0,0 +1,83 @@
+$primary-color: #4A90E2;
+$secondary-color: #50E3C2;
+$text-color: #4A4A4A;
+$background-color: #F5F7FA;
+$padding-standard: 15px;
+$border-radius-standard: 5px;
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin card-style {
+  background-color: white;
+  border-radius: $border-radius-standard;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  padding: $padding-standard;
+}
+
+body {
+  font-family: 'Poppins', sans-serif;
+  color: $text-color;
+  background-color: $background-color;
+}
+
+a {
+  color: $primary-color;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.profile-container {
+  @include flex-center;
+  flex-direction: column;
+}
+
+.profile-header {
+  @include flex-center;
+  flex-direction: column;
+  margin-bottom: 20px;
+
+  .profile-image {
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    margin-bottom: $padding-standard;
+  }
+
+  .profile-name {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .profile-bio {
+    text-align: center;
+    margin-top: $padding-standard;
+  }
+}
+
+.profile-content {
+  @include card-style;
+  margin: 20px auto;
+  width: 90%;
+  max-width: 600px;
+
+  .section {
+    &:not(:last-child) {
+      margin-bottom: 20px;
+    }
+
+    h2 {
+      border-bottom: 2px solid $primary-color;
+      padding-bottom: $padding-standard / 2;
+    }
+
+    p, ul {
+      margin-top: $padding-standard / 2;
+    }
+  }
+}
diff --git a/MovieVerse-Frontend/html/article.hbs b/MovieVerse-Frontend/html/article.hbs
new file mode 100644
index 00000000..644be6cd
--- /dev/null
+++ b/MovieVerse-Frontend/html/article.hbs
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{article.title}}</title>
+</head>
+<body>
+  <header>
+    <h1>{{article.title}}</h1>
+    <p>Written by: {{article.author}}</p>
+  </header>
+  <article>
+    <p>{{article.content}}</p>
+  </article>
+</body>
+</html>
diff --git a/MovieVerse-Frontend/html/movies-list.hbs b/MovieVerse-Frontend/html/movies-list.hbs
new file mode 100644
index 00000000..8bdfc1c8
--- /dev/null
+++ b/MovieVerse-Frontend/html/movies-list.hbs
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Movies List</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+    }
+    .movie {
+      margin-bottom: 20px;
+    }
+    .movie-title {
+      font-weight: bold;
+    }
+    .movie-year {
+      font-style: italic;
+    }
+    .movie-description {
+      margin-top: 5px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Movies List</h1>
+  {{#each movies}}
+    <div class="movie">
+      <div class="movie-title">{{this.title}}</div>
+      <div class="movie-year">Released in: {{this.year}}</div>
+      <div class="movie-description">{{this.description}}</div>
+    </div>
+  {{/each}}
+</body>
+</html>
diff --git a/MovieVerse-Frontend/html/profile.ejs b/MovieVerse-Frontend/html/profile.ejs
new file mode 100644
index 00000000..9fd52920
--- /dev/null
+++ b/MovieVerse-Frontend/html/profile.ejs
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>User Profile</title>
+    <link rel="stylesheet" href="../css/style.css">
+</head>
+<body>
+<header>
+    <nav>
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/profile">Profile</a></li>
+        </ul>
+    </nav>
+</header>
+<main>
+    <section class="profile-container">
+        <h1>User Profile</h1>
+        <% if (user) { %>
+            <div class="profile-info">
+                <img src="<%= user.avatar %>" alt="Profile Avatar" class="profile-avatar">
+                <h2><%= user.name %></h2>
+                <p>Email: <%= user.email %></p>
+                <p>Location: <%= user.location %></p>
+                <p>Member since: <%= user.createdAt %></p>
+                <p>Favorite Movies:</p>
+                <ul>
+                    <% user.favoriteMovies.forEach(movie => { %>
+                        <li><%= movie.title %></li>
+                    <% }) %>
+                </ul>
+                <p>Favorite Genres:</p>
+                <ul>
+                    <% user.favoriteGenres.forEach(genre => { %>
+                        <li><%= genre %></li>
+                    <% }) %>
+                </ul>
+                <p>Favorite Actors:</p>
+                <ul>
+                    <% user.favoriteActors.forEach(actor => { %>
+                        <li><%= actor.name %></li>
+                    <% }) %>
+                </ul>
+                <p>
+                    <a href="/profile/edit">Edit Profile</a>
+                </p>
+            </div>
+        <% } else { %>
+            <p>User not found.</p>
+        <% } %>
+    </section>
+</main>
+<footer>
+    <p>&copy; 2024 The MovieVerse. All rights reserved.</p>
+</footer>
+</body>
+</html>