diff --git a/.gitignore b/.gitignore
index f0366ba..28e0928 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,4 +8,6 @@
 /static/videos/
 /venv/
 /__pycache__/
+static/css/*.css
+static/css/*.css.map
 .env
\ No newline at end of file
diff --git a/app.py b/app.py
index 1134327..e3cf26b 100644
--- a/app.py
+++ b/app.py
@@ -212,6 +212,37 @@ def view(content_type, id):
         comic_pages=comic_pages if content_type == 'comic' else None
     )
 
+@app.route('/images')
+def drawings():
+    return render_template(
+        'images.html'
+    )
+
+@app.route('/tags_list/<page_type>')
+def tags_list(page_type):
+    comics_tags = [comic.tags for comic in Comic.query.all() if comic.tags]
+    images_tags = [image.tags for image in Image.query.all() if image.tags]
+    videos_tags = [video.tags for video in Video.query.all() if video.tags]
+
+    if page_type == 'video':
+        all_tags = [tag.strip() for tags in videos_tags for tag in tags.split(',')]
+    elif page_type == 'comic':
+        all_tags = [tag.strip() for tags in comics_tags for tag in tags.split(',')]
+    elif page_type == 'image':
+        all_tags = [tag.strip() for tags in images_tags for tag in tags.split(',')]
+    else:
+        all_tags = set(tag.strip() for tags in (comics_tags + images_tags + videos_tags) for tag in tags.split(','))
+    
+    sorted_tags = sorted(set(all_tags))
+
+    return render_template('tags_list.html', tags=sorted_tags, page_type=page_type)
+
+@app.route('/subnav')
+def subnav():
+    return render_template(
+        'subnav.html'
+    )
+
 @app.route('/image_edit/<int:id>', methods=['GET', 'POST'])
 @login_required
 def image_edit(id):
@@ -297,6 +328,12 @@ def card():
         'card.html'
     )
 
+@app.route('/gifs')
+def gifs():
+    return render_template(
+        'gifs.html'
+    )
+
 @app.route('/autocomplete')
 def autocomplete():
     search_query = request.args.get('search', '', type=str)
@@ -427,6 +464,10 @@ def videos():
     query = get_content_query(Video, subscriptions, search_query)
     pagination = query.paginate(page=page, per_page=10, error_out=False)
 
+    videos_tags = [video.tags for video in Video.query.all() if video.tags]
+    all_tags = [tag.strip() for tags in videos_tags for tag in tags.split(',')]
+    sorted_tags = sorted(set(all_tags))
+
     user_cookies = 0
     if current_user.is_authenticated:
         user_cookies_record = Cookies.query.filter_by(username=current_user.username).first()
@@ -438,9 +479,11 @@ def videos():
         pagination=pagination,
         user_cookies=user_cookies,
         search_query=search_query,
-        content_type='video'
+        content_type='video',
+        tags=sorted_tags
     )
 
+
 @app.route('/vote_video/<int:video_id>', methods=['POST'])
 @login_required
 def vote_video(video_id):
diff --git a/license b/license
new file mode 100644
index 0000000..2a1c41e
--- /dev/null
+++ b/license
@@ -0,0 +1,9 @@
+Copyright (c) 2025 artberry.xyz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+The "artberry.xyz" brand, logo, and trademarks are protected and may not be used without explicit permission from the copyright holder. This license does not grant any rights to use the brand or trademarks associated with "artberry.xyz".
\ No newline at end of file
diff --git a/static/css/styles.css b/static/css/styles.css
index 21f8ab2..be2157a 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,930 +1,459 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
-* {
-  font-family: 'Nunito', sans-serif;
-}
-html, body {
-  height: 100%;
-  margin: 0;
-}
-body {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  background-color: #05040A;
-}
-.content {
-  flex: 1;
-}
-.preview-container {
-  margin-top: 20px;
-  text-align: center;
-}
-.preview-container img {
-  max-width: 100%;
-  max-height: 300px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  margin-top: 10px;
-}
-#autocomplete-suggestions {
-  position: absolute;
-  top: 260px;
-  left: 42%;
-  width: 11.5%;
-  background-color: #86597f;
-  border: 1px solid #9a6fa0;
-  border-radius: 6px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  max-height: 250px;
-  overflow-y: auto;
-  font-family: 'Comfortaa', sans-serif;
-  padding: 0;
-}
-
-.suggestion-item {
-  padding: 1px;
-  font-size: 14px;
-  color: #ffffff;
-  cursor: pointer;
-  transition: background-color 0.2s ease, color 0.2s ease;
-}
-
-.suggestion-item:hover {
-  background-color: #3f3242;
-  color: #ffffff;
-}
-
-.suggestion-item:active {
-  background-color: #e2e2e2;
-}
-
-.suggestion-item:not(:last-child) {
-  border-bottom: 1px solid #f0f0f0;
-}
-.hidden {
-  display: none;
-}
-.button {
-  background-color: #6a4664;
-  border: none;
-  outline: none;
-  border-radius: 3px;
-  color:white;
-  transition: background-color 0.3s ease;
-  text-decoration: none;
-  padding: 7px 10px;
-  margin-top:  10px;
-  margin-bottom: 10px;
-}
-a {
-  color:yellow;
-  text-decoration: none;
-}
-.input-field {
-  display: flex;
-  align-items: center;
-  position: relative;
-  max-width: 100%;
-}
-label {
-	color:white
-}
-span {
-	color:white;
-}
-h2 {
-	color:white;
-}
-input {
-	color:white;
-}
-.blur {
-    filter: blur(15px);
-    transition: filter 0.3s ease;
-}
-
-.modal-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.7);
-    justify-content: center;
-    align-items: center;
-    z-index: 1050;
-}
-
-.modal-content {
-    background: #3f3242;
-    padding: 20px;
-    text-align: center;
-    border-radius: 8px;
-    width: 300px;
-    z-index: 1060;
-}
-
-.modal-buttons {
-    margin-top: 20px;
-}
-
-.modal-button {
-    background: #6a4664;
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    transition: background-color 0.3s ease;
-    cursor: pointer;
-    margin: 0 10px;
-    border-radius: 3px;
-}
-
-.modal-button.cancel {
-    background: #6a4664;
-}
-.input-field {
-  font-size: 18px;
-  padding: 5px 10px;
-  width: 100%;
-  max-width: 400px;
-  outline: none;
-  background: #6a4664;
-  color: #FFFFFF;
-  border: none;
-  border-radius: 3px;
-  transition: .3s ease;
-}
-header {
-  margin-top: 120px;
-}
-.title {
-  display: flex;
-  justify-content: center;
-}
-.search-form {
-  display: flex;
-  justify-content: center;
-  gap: 5px;
-}
-.input-field:focus {
-  background: #86597f;
-  border: none;
-  border-radius: 3px;
-}
-.input-field::placeholder {
-  color: #DDDDDD;
-}
-footer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: #6a4664;
-  width: 100%;
-  height: 60px;
-  box-sizing: border-box;
-}
-footer .button {
-  padding: 10px 20px;
-  text-decoration: none;
-  color: white;
-  background-color: #845e80;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-footer .button:hover {
-  background-color: #9a6fa0;
-}
-.pagination {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  margin: 20px 0;
-}
-.pagination .button {
-  padding: 5px 10px;
-  text-decoration: none;
-  color: white;
-  background-color: #6a4664;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-.pagination .button:hover {
-  background-color: #845e80;
-}
-.pagination .button:focus,
-.pagination .button:active {
-  outline: none;
-}
 .container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  box-sizing: border-box;
-  padding: 20px;
-  gap: 15px;
-}
-.video-player {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.video-title {
-  display: flex;
-  margin-top: 80px;
-  justify-content: center;
-  text-align: center;
-}
-.video-details {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
-}
-.gallery {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 10px;
-  margin: 20px auto;
-  padding: 20px;
-  max-width: 1200px;
-}
-.card {
-  border-radius: 10px;
-  overflow: hidden;
-  background-color: #6a4664;
-}
-.card img {
-  width: 100%;
-  height: 200px;
-  object-fit: cover;
-}
-.card p {
-  margin: 10px;
-  font-size: 1rem;
-}
-.card:hover {
-  transform: scale(1.05);
-}
-.comic-viewer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  gap: 20px;
-  flex-wrap: wrap;
-}
-.comic-card {
-  border-radius: 5px;
-  overflow: hidden;
-  transition: transform 0.3s;
-}
-.comic-card:hover {
-  transform: scale(1.05);
-}
-.comic-card img {
-  width: 100%;
-  height: auto;
-}
-.comic-card p {
-  margin: 10px;
-}
-.comicname {
-  display: flex;
-  justify-content: center;
-}
-.banner {
-  width: 100%;
-  height: 250px;
-  position: relative;
-  margin-top: 0;
-}
-.avatar,
-.banner img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.avatar-container {
   position: absolute;
-  top: 70%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  background-color: #1f091b;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.new-content {
+  width: 1500px;
+  height: 340px;
+  top: 349px;
   left: 50%;
   transform: translateX(-50%);
-  z-index: 1;
-  width: 128px;
-  height: 128px;
-  overflow: hidden;
-  border-radius: 50%;
-  border: 3px solid #845e80;
-  margin-bottom:80px;
 }
-.current-item-image {
+
+.popular-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px;
+  gap: 20px;
+  width: 1502px;
+  height: 900px;
+  top: 737px;
+  left: 50%;
+  transform: translateX(-50%);
+  position: absolute;
+}
+
+.viewed-content {
+  width: 1502px;
+  height: 631px;
+  top: 1677px;
+  left: 50%;
+  transform: translateX(-50%);
+  position: absolute;
+}
+
+.popular-categories {
+  width: 1500px;
+  height: 277px;
+  top: 2308px;
+  left: 50%;
+  transform: translateX(-50%);
+  position: absolute;
+}
+
+.new-content-text {
+  width: 123px;
+  height: 33px;
+  font-family: Nunito, sans-serif;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  color: #8784C9;
+}
+
+.popular-content-text {
+  width: 123px;
+  height: 33px;
+  font-family: Nunito, sans-serif;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  color: #8784C9;
+}
+
+.viewed-content-text {
+  width: 123px;
+  height: 33px;
+  font-family: Nunito, sans-serif;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  color: #8784C9;
+}
+
+.popular-categories-text {
+  width: 321px;
+  height: 33px;
+  font-family: Nunito, sans-serif;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  color: #8784C9;
+}
+
+.view-more-button {
+  width: 1500px;
+  height: 40px;
+  border-radius: 10px;
+  gap: 10px;
+  padding-top: 10px;
+  padding-right: 679px;
+  padding-bottom: 10px;
+  padding-left: 679px;
+  background-color: #8784C9;
+  border: none;
+  color: #fff;
+  font-family: Nunito, sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  cursor: pointer;
+  white-space: nowrap;
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.new-context-button-text {
+  width: 134px;
+  height: 22px;
+  font-family: Nunito, sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  color: #3C3882;
+}
+
+.navbar {
+  width: 100%;
+  max-width: 1500px;
+  height: 120px;
+  background: #05040A;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  gap: 20px;
+  margin: 0 auto;
+}
+
+.logo {
+  width: 307px;
+  height: 60px;
+}
+
+.search-container {
+  display: flex;
+  align-items: center;
+  width: 452.5px;
+  height: 27px;
+  border: 1px solid #8784C9;
+  border-radius: 20px;
+  padding: 15px;
+  background: #05040A;
+  position: relative;
+  transition: border-color 0.3s ease;
+}
+
+.search-icon-container {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+}
+
+.search-icon,
+.search-hover-icon {
+  width: 24px;
+  height: 24px;
   position: absolute;
   top: 0;
   left: 0;
-  width: 50px;
-  height: auto;
-  border-radius: 10px;
-}
-h2 {
-  margin: 30px 0 10px;
-}
-.bio {
-  margin-top: 65px;
-  padding: 1px;
-  background-color: #845e80;
-  border-radius: 10px;
-  max-width: 60%;
-  width: 80%;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom:10px;
-}
-.bio-content {
-  color: #fff;
-}
-.bio h2 {
-  margin: 0 0 10px;
-  font-size: 1.5rem;
-}
-.bio p {
-  font-size: 1rem;
-  line-height: 1.5;
-}
-.header,
-body {
-  display: flex;
+  transition: opacity 0.3s ease;
 }
 
-.cookie-balance,
-.home-button,
-.cookie-balance,
-h1 {
-  margin-top: 20px;
-  color: #fff;
-}
-.header {
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.cookie-balance {
-  background-color: #6a4664;
-  border-radius: 5px;
-  padding: 10px 20px;
-  font-size: 1.2rem;
-  display: inline-block;
-}
-.item-container {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
-  padding: 20px;
-  max-width: 1200px;
-  width: 100%;
-  margin: 0 auto;
-  justify-content: center;
-}
-.item {
-  background-color: #6e4568;
-  border-radius: 10px;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  transition: transform 0.3s, box-shadow 0.3s;
-}
-.item:hover {
-  transform: scale(1.05);
-}
-.comic-pages {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
-  margin: 20px auto;
-  max-width: 1200px;
-}
-.comic-pages img {
-  max-width: 90%;
-  height: auto;
-  border: 2px solid #845e80;
-  border-radius: 5px;
-  transition: transform 0.3s;
-}
-.comic-pages img:hover {
-  transform: scale(1.05);
-  border-color: #9a6fa0;
-}
-.item img {
-  width: 100%;
-  max-width: 200px;
-  height: auto;
-  border-radius: 5px;
-  margin-bottom: 10px;
-  transition: transform 0.3s;
-}
-.home-button {
-  background-color: #6a4664;
-  border: none;
-  outline: none;
-  border-radius: 3px;
-  color:white;
-  transition: background-color 0.3s ease;
-  text-decoration: none;
-  padding: 7px 10px;
-  margin-top:  10px;
-  margin-bottom: 10px;
-}
-.home-button:hover {
-	background-color: #9a6fa0;
-}
-.item button {
-  background-color: #9a6fa0;
-  border: none;
-  outline: none;
-  border-radius: 3px;
-  color:white;
-  transition: background-color 0.3s ease;
-  text-decoration: none;
-  padding: 7px 10px;
-  margin-top:  10px;
-  margin-bottom: 10px;
-}
-.item-button:hover {
-		background-color: #6a4664;
-}
-.item img:hover {
-  transform: scale(1.1);
-}
-.item 
- {
-  border: none;
-  padding: 10px 20px;
-  border-radius: 5px;
-}
-.home-button:hover,
-.item button:hover {
-  background-color: #9a6fa0;
-  filter: brightness(1.1);
-}
-.home-button {
-  display: inline-block;
-  margin: 30px auto 20px;
-  padding: 12px 25px;
-  text-decoration: none;
-  border-radius: 5px;
-  font-weight: 700;
-}
-.profile-gallery {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
-  margin: 20px auto;
-  padding: 20px;
-  max-width: 1200px;
-}
-.profile-gallery .card {
-  border-radius: 10px;
-  overflow: hidden;
-  background-color: #6a4664;
-  text-align: center;
-  width: 240px;
-  height: 210px;
-}
-.profile-gallery .card img {
-  width: 100%;
-  height: 200px;
-  object-fit: cover;
-}
-.profile-gallery .card .card-title {
-  margin: 10px;
-  font-size: 1rem;
-  color: white;
-}
-.profile-art-card {
-  background-color: #4a3b52;
-}
-.profile-art-card:hover {
-  transform: scale(1.05);
-}
-.profile-video-card {
-  background-color: #3b4a52;
-}
-.profile-video-card:hover {
-  transform: scale(1.05);
-}
-.profile-comic-card {
-  background-color: #4b523b;
-}
-.profile-comic-card:hover {
-  transform: scale(1.05);
-}
-.biotext {
-  display: flex;
-  justify-content: center;
-}
-p {
-  color:white;
-}
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-::-webkit-scrollbar-track {
-  background-color: #3f3242;
-  border-radius: 10px;
-}
-::-webkit-scrollbar-thumb {
-  background-color: #845e80;
-  border-radius: 10px;
-  border: 2px solid #3f3242;
-  transition: background-color 0.3s ease;
-}
-::-webkit-scrollbar-thumb:hover {
-  background-color: #9a6fa0;
-}
-.comment {
-  display: flex;
-  align-items: flex-start;
-  background-color: #6a4664;
-  padding: 15px;
-  margin: 10px 0;
-  border-radius: 3px;
-  position: relative;
-}
-.comment .avatar {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  margin-right: 15px;
-  object-fit: cover;
-  border: 2px solid #845e80;
-}
-input[type="checkbox"]:checked {
-    background-color: #6a4664;
-    accent-color: #6a4664;
-}
-.comment .content {
-  flex: 1;
-}
-.comment .content p {
-  margin: 5px 0;
-}
-.comment .content p:first-child {
-  font-weight: bold;
-  color: #fff;
-}
-.comment .content p:last-child::before {
-  content: "\A";
-  white-space: pre;
-  display: block;
-}
-.comment .content time {
-  font-size: 0.8rem;
-  color: #fff;
-}
-.delete-button {
-  background-color: #845e80;
-  color: #fff;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 0.9rem;
-  transition: background-color 0.3s ease;
-  position: absolute;
-  bottom: 4px;
-  left: 10px;
-}
-.delete-button:hover {
-  background-color: #9e728f;
-}
-.delete-button:active {
-  background-color: #6e4c65;
-}
-.details img {
-  max-width: 85%;
-  height: auto;
-  display: block;
-  margin: 0 auto;
-}
-video {
-  max-width: 85%;
-  height: auto;
-  display: block;
-  margin: 0 auto;
+.search-hover-icon {
+  opacity: 0;
 }
 
-.button {
-  display: inline-block;
+.search-container:hover .search-hover-icon,
+.search-container:focus-within .search-hover-icon {
+  opacity: 1;
+}
+
+.search-container:hover .search-icon,
+.search-container:focus-within .search-icon {
+  opacity: 0;
+}
+
+.search-input {
+  border: none;
+  outline: none;
+  flex-grow: 1;
+  font-size: 16px;
+  height: 24px;
+  color: #8784C9;
+  background-color: #05040A;
+}
+
+.search-container:hover {
+  border-color: #3C3882;
+}
+
+.search-container:focus-within {
+  border-color: #3C3882;
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
   margin-left: 10px;
 }
-.comments-list {
-  max-height: none;
-  overflow: visible;
+
+.video-icon {
+  width: 24px;
+  height: 24px;
+  margin-left: 10px;
 }
-.comments-list p {
-  color: #fff;
+
+.tray-icon {
+  width: 11px;
+  height: 7px;
+  margin-left: 5px;
 }
-.comment .content a.username-link {
-  color: #ffd700;
+
+.translate-btn {
+  position: relative;
+  width: 23px;
+  height: 27px;
+  border: 1px solid #8784C9;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #05040A;
+  cursor: pointer;
+  padding: 15px;
+  transition: border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
+}
+
+.translate-icon,
+.translate-hover-icon {
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transition: opacity 0.3s ease;
+}
+
+.translate-hover-icon {
+  opacity: 0;
+}
+
+.translate-btn:hover .translate-hover-icon {
+  opacity: 1;
+}
+
+.translate-btn:hover .translate-icon {
+  opacity: 0;
+}
+
+.translate-btn:hover {
+  border-color: #3C3882;
+}
+
+.overlay-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 20px;
+  height: 20px;
+  opacity: 0.7;
+}
+
+.menu {
+  display: flex;
+  font-family: Nunito, sans-serif;
+  gap: 22px;
+  width: 519.5px;
+  height: 22px;
+  justify-content: space-between;
+  padding-left: 60px;
+  padding-right: 60px;
+}
+
+.menu a {
   text-decoration: none;
-}
-.comment .content a.username-link:hover {
-  text-decoration: underline;
+  color: #8784C9;
+  font-size: 16px;
+  transition: color 0.3s ease;
 }
 
-
-@media (min-width: 481px) and (max-width: 767px) {
-.gallery {
-  grid-template-columns: repeat(1, 1fr);
-}
-nav .button {
-    padding: 8px 14px;
-}
-footer .button {
-  padding: 8px 20px;
-}
-nav {
-  margin-right: 10px;
-}
-.pagination .button {
-    padding: 25px 25px;
-    font-size: 20px
-
-  }
-
-.input-field {
-  padding: 15px 16px;
+.menu a:hover {
+  color: #3C3882;
 }
 
-.modal-button {
-      padding: 15px 45px;
-}
-.navigation .button {
-  padding: 25px 35px;
-
-}
-.profile-gallery{
-  grid-template-columns: repeat(1, 1fr);
-}
+.auth-container {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
 }
 
-@media (max-width: 480px) {
-  .gallery {
-    grid-template-columns: repeat(1, 1fr);
-  }
-  nav .button {
-    padding: 6px 6px;
-  }
-  footer .button {
-    padding: 6px 12px;
-  }
-  nav {
-    margin-right: 5px;
-  }
-  .pagination .button {
-    padding: 15px 15px;
-    font-size: 16px;
-  }
-  .input-field {
-    padding: 10px 12px;
-  }
-  .modal-button {
-    padding: 10px 30px;
-  }
-  .navigation .button {
-    padding: 15px 25px;
-  }
-  .profile-gallery {
-    grid-template-columns: repeat(1, 1fr);
-  }
-  .login-button {
-    width: 150px;
-    height: 50px;
-  }
-}
-/*iphone 14 Plus*/
-@media (max-width: 430px) {
-  .gallery {
-    grid-template-columns: repeat(1, 1fr);
-  }
-  nav .button {
-    padding: 12px 5px;
-  }
-  footer .button {
-    padding: 12px 5px;
-  }
-  nav {
-    margin-right: 5px;
-  }
-  .pagination .button {
-    padding: 15px 15px;
-    font-size: 16px;
-  }
-  .input-field {
-    padding: 10px 30px;
-  }
-  .modal-button {
-    padding: 10px 30px;
-  }
-  .navigation .button {
-    padding: 15px 25px;
-  }
-  .profile-gallery {
-    grid-template-columns: repeat(1, 1fr);
-  }
-  .login-button {
-    width: 150px;
-    height: 50px;
-  }
-}
-/*iphone 6/7/8 Plus*/
-@media (max-width: 414px) {
-  .gallery {
-    grid-template-columns: repeat(1, 1fr);
-  }
-  nav .button {
-    padding: 12px 5px;
-  }
-  footer .button {
-    padding: 12px 5px;
-  }
-  nav {
-    margin-right: 5px;
-  }
-  .pagination .button {
-    padding: 15px 15px;
-    font-size: 16px;
-  }
-  .input-field {
-    padding: 10px 12px;
-  }
-  .modal-button {
-    padding: 10px 30px;
-  }
-  .navigation .button {
-    padding: 15px 25px;
-  }
-  .profile-gallery {
-    grid-template-columns: repeat(1, 1fr);
-  }
-  .login-button {
-    width: 150px;
-    height: 50px;
-  }
-}
-/*iphone pixel 3*/
-@media (min-width: 403px) and (max-width: 450px) {
-  .gallery {
-    grid-template-columns: repeat(1, 1fr);
-  }
-  nav .button {
-    padding: 12px 4px;
-  }
-  footer .button {
-    padding: 12px 5px;
-  }
-  nav {
-    margin-right: 5px;
-  }
-  .pagination .button {
-    padding: 15px 15px;
-    font-size: 16px;
-  }
-  .input-field {
-    padding: 10px 12px;
-  }
-  .modal-button {
-    padding: 10px 30px;
-  }
-  .navigation .button {
-    padding: 15px 25px;
-  }
-  .profile-gallery {
-    grid-template-columns: repeat(1, 1fr);
-  }
-  .login-button {
-    width: 150px;
-    height: 50px;
-  }
-}
-/*iphone 12*/
-@media (min-width: 382px) and (max-width: 402px) {
-  .gallery {
-    grid-template-columns: repeat(1, 1fr);
-  }
-  nav .button {
-    padding: 12px 2px;
-  }
-  footer .button {
-    padding: 12px 5px;
-  }
-  nav {
-    margin-right: 5px;
-  }
-  .pagination .button {
-    padding: 15px 15px;
-    font-size: 16px;
-  }
-  .input-field {
-    padding: 10px 12px;
-  }
-  .modal-button {
-    padding: 10px 30px;
-  }
-  .navigation .button {
-    padding: 15px 25px;
-  }
-  .profile-gallery {
-    grid-template-columns: repeat(1, 1fr);
-  }
-  .login-button {
-    width: 150px;
-    height: 50px;
-  }
-}
-/*iphone 6/7/8/X/XR*/
-@media (min-width: 372px) and (max-width: 381px) {
-  .gallery {
-    grid-template-columns: repeat(1, 1fr);
-  }
-  nav .button {
-    padding: 10px 1px;
-  }
-  footer .button {
-    padding: 10px 1px;
-  }
-  nav {
-    margin-right: 5px;
-  }
-  .pagination .button {
-    padding: 15px 15px;
-    font-size: 16px;
-  }
-  .input-field {
-    padding: 10px 12px;
-  }
-  .modal-button {
-    padding: 10px 30px;
-  }
-  .navigation .button {
-    padding: 15px 25px;
-  }
-  .profile-gallery {
-    grid-template-columns: repeat(1, 1fr);
-  }
-  .login-button {
-    width: 150px;
-    height: 50px;
-  }
-}
-/*iphone 4/5/SE1*/
-@media (min-width: 200px) and (max-width: 371px) {
-  .gallery {
-    grid-template-columns: repeat(1, 1fr);
-  }
-  nav .button {
-    padding: 1px 1px;
-  }
-  footer .button {
-    padding: 1px 1px;
-  }
-  nav {
-    margin-right: 5px;
-  }
-  .pagination .button {
-    padding: 15px 15px;
-    font-size: 16px;
-  }
-  .input-field {
-    padding: 10px 1px;
-  }
-  .modal-button {
-    padding: 10x 30px;
-  }
-  .navigation .button {
-    padding: 15px 25px;
-  }
-  .profile-gallery {
-    grid-template-columns: repeat(1, 1fr);
-  }
-  .-button {
-    padding: 15px 25px;
-  }
-  .login-button {
-    width: 150px;
-    height: 50px;
-  }
+.discord-icon-container {
+  position: relative;
+  width: 42px;
+  height: 42px;
 }
 
+.discord-icon,
+.discord-hover-icon {
+  width: 42px;
+  height: 42px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: opacity 0.3s ease;
+}
+
+.discord-hover-icon {
+  opacity: 0;
+}
+
+.discord-icon-container:hover .discord-hover-icon {
+  opacity: 1;
+}
+
+.discord-icon-container:hover .discord-icon {
+  opacity: 0;
+}
+
+.login-btn {
+  width: 87px;
+  height: 42px;
+  border-radius: 20px;
+  background: #8784C9;
+  border: 1px solid #8784C9;
+  padding: 10px 15px;
+  font-size: 16px;
+  font-family: Nunito, sans-serif;
+  font-weight: 500;
+  line-height: 21.82px;
+  letter-spacing: 0%;
+  color: #05040A;
+  cursor: pointer;
+  margin-left: 10px;
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+.login-btn:hover {
+  background-color: #3C3882;
+  color: #05040A;
+  border-color: #3C3882;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: #05040A;
+  border: 1px solid #3C3882;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  display: none;
+  flex-direction: column;
+  width: 150px;
+  z-index: 10;
+}
+
+.dropdown-item {
+  padding: 10px 15px;
+  font-size: 14px;
+  border-radius: 4px;
+  color: #8784C9;
+  cursor: pointer;
+  transition: background 0.3s ease, color 0.3s ease;
+}
+
+.dropdown-item:hover {
+  background: #3C3882;
+  color: white;
+}
+
+.tags-container {
+  width: 1500px;
+  height: 35px;
+  position: absolute;
+  top: 266px;
+  left: 210px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 10px;
+  border: none;
+  background-color: #05040A;
+  overflow: hidden;
+}
+
+.tag {
+  height: 35px;
+  border-radius: 5px;
+  padding: 6px 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #3C3882;
+  border: none;
+  color: #8784C9;
+  margin: 0;
+  visibility: visible;
+  transition: visibility 0.3s ease;
+}
+
+.list-button {
+  width: 35px;
+  height: 35px;
+  border-radius: 10px;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #8784C9;
+  background-color: transparent;
+  color: #3C3882;
+  margin-left: 10px;
+  gap: 5px;
+  position: relative;
+  z-index: 2;
+}
+
+.tags-container > .list-button {
+  position: absolute;
+  right: 0;
+  z-index: 2;
+}
+
+.taglist-shadow {
+  width: 64px;
+  height: 35px;
+  position: absolute;
+  right: 0;
+  background: linear-gradient(to right, rgba(5, 4, 10, 0) 30%, rgba(5, 4, 10, 0.5) 60%, #05040A 100%);
+}
+
+/*# sourceMappingURL=styles.css.map */
diff --git a/static/css/styles.scss b/static/css/styles.scss
new file mode 100644
index 0000000..f57c711
--- /dev/null
+++ b/static/css/styles.scss
@@ -0,0 +1,428 @@
+.container {
+    position: absolute;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    background-color: #1f091b;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.new-content {
+    width: 1500px;
+    height: 340px;
+    top: 349px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.popular-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0px;
+    gap: 20px;
+    width: 1502px;
+    height: 900px;
+    top: 737px;
+    left: 50%;
+    transform: translateX(-50%);
+    position: absolute;
+}
+
+.viewed-content {
+    width: 1502px;
+    height: 631px;
+    top: 1677px;
+    left: 50%;
+    transform: translateX(-50%);
+    position: absolute;
+}
+
+.popular-categories {
+    width: 1500px;
+    height: 277px;
+    top: 2308px;
+    left: 50%;
+    transform: translateX(-50%);
+    position: absolute;
+}
+
+.new-content-text {
+    width: 123px;
+    height: 33px;
+    font-family: Nunito, sans-serif;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 100%;
+    letter-spacing: 0%;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    color: #8784C9;
+}
+
+.popular-content-text {
+    width: 123px;
+    height: 33px;
+    font-family: Nunito, sans-serif;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 100%;
+    letter-spacing: 0%;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    color: #8784C9;
+}
+
+.viewed-content-text {
+    width: 123px;
+    height: 33px;
+    font-family: Nunito, sans-serif;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 100%;
+    letter-spacing: 0%;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    color: #8784C9;
+}
+
+.popular-categories-text {
+    width: 321px;
+    height: 33px;
+    font-family: Nunito, sans-serif;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 100%;
+    letter-spacing: 0%;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    color: #8784C9;
+}
+
+.view-more-button {
+    width: 1500px;
+    height: 40px;
+    border-radius: 10px;
+    gap: 10px;
+    padding-top: 10px;
+    padding-right: 679px;
+    padding-bottom: 10px;
+    padding-left: 679px;
+    background-color: #8784C9;
+    border: none;
+    color: #fff;
+    font-family: Nunito, sans-serif;
+    font-weight: 500;
+    font-size: 16px;
+    cursor: pointer;
+    white-space: nowrap;
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.new-context-button-text {
+    width: 134px;
+    height: 22px;
+    font-family: Nunito, sans-serif;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 100%;
+    letter-spacing: 0%;
+    color: #3C3882;
+}
+.navbar {
+    width: 100%;
+    max-width: 1500px;
+    height: 120px;
+    background: #05040A;
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    gap: 20px;
+    margin: 0 auto;
+}
+.logo {
+    width: 307px;
+    height: 60px;
+}
+.search-container {
+    display: flex;
+    align-items: center;
+    width: 452.5px;
+    height: 27px;
+    border: 1px solid #8784C9;
+    border-radius: 20px;
+    padding: 15px;
+    background: #05040A;
+    position: relative;
+    transition: border-color 0.3s ease;
+}
+.search-icon-container {
+    position: relative;
+    width: 24px;
+    height: 24px;
+    margin-right: 10px;
+}
+.search-icon,
+.search-hover-icon {
+    width: 24px;
+    height: 24px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: opacity 0.3s ease;
+}
+.search-hover-icon {
+    opacity: 0;
+}
+.search-container:hover .search-hover-icon,
+.search-container:focus-within .search-hover-icon {
+    opacity: 1;
+}
+
+.search-container:hover .search-icon,
+.search-container:focus-within .search-icon {
+    opacity: 0;
+}
+
+.search-input {
+    border: none;
+    outline: none;
+    flex-grow: 1;
+    font-size: 16px;
+    height: 24px;
+    color: #8784C9;
+    background-color: #05040A;
+}
+
+.search-container:hover {
+    border-color: #3C3882;
+}
+
+.search-container:focus-within {
+    border-color: #3C3882;
+}
+
+.icon-container {
+    display: flex;
+    align-items: center;
+    margin-left: 10px;
+}
+
+.video-icon {
+    width: 24px;
+    height: 24px;
+    margin-left: 10px;
+}
+.tray-icon {
+    width: 11px;
+    height: 7px;
+    margin-left: 5px;
+}
+.translate-btn {
+    position: relative;
+    width: 23px;
+    height: 27px;
+    border: 1px solid #8784C9;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #05040A;
+    cursor: pointer;
+    padding: 15px;
+    transition: border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
+}
+.translate-icon,
+.translate-hover-icon {
+    width: 24px;
+    height: 24px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transition: opacity 0.3s ease;
+}
+.translate-hover-icon {
+    opacity: 0;
+}
+.translate-btn:hover .translate-hover-icon {
+    opacity: 1;
+}
+
+.translate-btn:hover .translate-icon {
+    opacity: 0;
+}
+.translate-btn:hover {
+    border-color: #3C3882;
+}
+.overlay-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 20px;
+    height: 20px;
+    opacity: 0.7;
+}
+.menu {
+    display: flex;
+    font-family: Nunito, sans-serif;
+    gap: 22px;
+    width: 519.5px;
+    height: 22px;
+    justify-content: space-between;
+    padding-left: 60px;
+    padding-right: 60px;
+}
+.menu a {
+    text-decoration: none;
+    color: #8784C9;
+    font-size: 16px;
+    transition: color 0.3s ease;
+}
+.menu a:hover {
+    color: #3C3882;
+}
+.auth-container {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+}
+.discord-icon-container {
+    position: relative;
+    width: 42px;
+    height: 42px;
+}
+.discord-icon,
+.discord-hover-icon {
+    width: 42px;
+    height: 42px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: opacity 0.3s ease;
+}
+.discord-hover-icon {
+    opacity: 0;
+}
+.discord-icon-container:hover .discord-hover-icon {
+    opacity: 1;
+}
+.discord-icon-container:hover .discord-icon {
+    opacity: 0;
+}
+.login-btn {
+    width: 87px;
+    height: 42px;
+    border-radius: 20px;
+    background: #8784C9;
+    border: 1px solid #8784C9;
+    padding: 10px 15px;
+    font-size: 16px;
+    font-family: Nunito, sans-serif;
+    font-weight: 500;
+    line-height: 21.82px;
+    letter-spacing: 0%;
+    color: #05040A;
+    cursor: pointer;
+    margin-left: 10px;
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+.login-btn:hover {
+    background-color: #3C3882;
+    color: #05040A;
+    border-color: #3C3882;
+}
+.dropdown-menu {
+position: absolute;
+top: 100%;
+right: 0;
+background: #05040A;
+border: 1px solid #3C3882;
+border-radius: 8px;
+box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+display: none;
+flex-direction: column;
+width: 150px;
+z-index: 10;
+}
+.dropdown-item {
+padding: 10px 15px;
+font-size: 14px;
+border-radius:4px;
+color: #8784C9;
+cursor: pointer;
+transition: background 0.3s ease, color 0.3s ease;
+}
+.dropdown-item:hover {
+background: #3C3882;
+color: white;
+}
+.tags-container {
+    width: 1500px;
+    height: 35px;
+    position: absolute;
+    top: 266px;
+    left: 210px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+    border: none;
+    background-color: #05040A;
+    overflow: hidden;
+}
+
+.tag {
+    height: 35px;
+    border-radius: 5px;
+    padding: 6px 10px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #3C3882;
+    border: none;
+    color: #8784C9;
+    margin: 0;
+    visibility: visible;
+    transition: visibility 0.3s ease;
+}
+
+.list-button {
+    width: 35px;
+    height: 35px;
+    border-radius: 10px;
+    padding: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid #8784C9;
+    background-color: transparent;
+    color: #3C3882;
+    margin-left: 10px;
+    gap: 5px;
+    position: relative;
+    z-index: 2;
+}
+
+.tags-container > .list-button {
+    position: absolute;
+    right: 0;
+    z-index: 2;
+}
+
+.taglist-shadow {
+    width: 64px;
+    height: 35px;
+    position: absolute;
+    right: 0;
+    background: linear-gradient(to right, rgba(5, 4, 10, 0) 30%, rgba(5, 4, 10, 0.5) 60%, #05040A 100%);
+}
\ No newline at end of file
diff --git a/static/icons/list-icon.svg b/static/icons/list-icon.svg
new file mode 100644
index 0000000..4958270
--- /dev/null
+++ b/static/icons/list-icon.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="25" viewBox="0 0 15 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0607 13.5607C14.6464 12.9749 14.6464 12.0251 14.0607 11.4393L4.51472 1.8934C3.92893 1.30761 2.97919 1.30761 2.3934 1.8934C1.80761 2.47919 1.80761 3.42893 2.3934 4.01472L10.8787 12.5L2.3934 20.9853C1.80761 21.5711 1.80761 22.5208 2.3934 23.1066C2.97919 23.6924 3.92893 23.6924 4.51472 23.1066L14.0607 13.5607ZM12 14H13V11H12V14Z" fill="#8784C9"/>
+</svg>
diff --git a/static/js/navbar.js b/static/js/navbar.js
new file mode 100644
index 0000000..ed4e2c3
--- /dev/null
+++ b/static/js/navbar.js
@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const iconContainer = document.querySelector('.icon-container');
+    const dropdownMenu = document.querySelector('.dropdown-menu');
+
+    iconContainer.addEventListener('click', function (event) {
+        dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
+        event.stopPropagation();
+    });
+
+    document.addEventListener('click', function () {
+        dropdownMenu.style.display = 'none';
+    });
+
+    dropdownMenu.addEventListener('click', function (event) {
+        event.stopPropagation();
+    });
+});
\ No newline at end of file
diff --git a/static/js/taglist.js b/static/js/taglist.js
new file mode 100644
index 0000000..af5ea11
--- /dev/null
+++ b/static/js/taglist.js
@@ -0,0 +1,22 @@
+window.addEventListener('DOMContentLoaded', function() {
+    const listButton = document.querySelector('.list-button');
+    const tags = document.querySelectorAll('.tag');
+
+    const buttonRect = listButton.getBoundingClientRect();
+
+    function checkTagVisibility() {
+        tags.forEach(tag => {
+            const tagRect = tag.getBoundingClientRect();
+
+            if (tagRect.right > buttonRect.left) {
+                tag.style.visibility = 'hidden';
+            } else {
+                tag.style.visibility = 'visible';
+            }
+        });
+    }
+
+    document.querySelector('.tags-container').addEventListener('scroll', checkTagVisibility);
+
+    checkTagVisibility();
+});
\ No newline at end of file
diff --git a/templates/card.html b/templates/card.html
deleted file mode 100644
index c7a8599..0000000
--- a/templates/card.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Navbar</title>
-    <head>
-        <body>
-            {% include 'navbar.html' %}
-            <style>
-                .card {
-                    width: 353px;
-                    height: auto;
-                    position: absolute;
-                    display: flex;
-                    flex-direction: column;
-                    font-family: Nunito, sans-serif;
-                    gap: 5px;
-                }
-                .card-cover {
-                    width: 353px;
-                    height: 180px;
-                    background: #1D1C2E;
-                }
-                .card-info {
-                    width: 353px;
-                    height: 59px;
-                    display: flex;
-                    flex-direction: column;
-                    gap: 5px;
-                }
-                .card-header {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                }
-                .card-stats {
-                    display: flex;
-                    gap: 10px;
-                }
-                .stat {
-                    display: flex;
-                    align-items: center;
-                    gap: 5px;
-                }
-                .card-text {
-                    font-family: 'Nunito';
-                    font-size: 14px;
-                    color: #8784C9;
-                }
-            </style>
-            <div class="card">
-                <div class="card-cover"></div>
-                <div class="card-info">
-                    <div class="card-header">
-                        <span class="card-title" style="color: #3C3882;">Netwide Assembler</span>
-                        <div class="card-stats">
-                            <div class="stat">
-                                <img src="{{ url_for('static', filename='card/like-icon.svg') }}" alt="Лайк" width="20" height="20">
-                                <span style="color: #8784C9;">1344</span>
-                            </div>
-                            <div class="stat">
-                                <img src="{{ url_for('static', filename='card/views-icon.svg') }}" alt="Просмотры" width="20" height="20">
-                                <span style="color: #8784C9;">321132</span>
-                            </div>
-                        </div>
-                    </div>
-                    <p class="card-text" style="font-family: Nunito, sans-serif;">The Netwide Assembler, NASM, is an 80x86 and x86-64 assembler designed for portability and
-                        modularity. It supports a range of object file formats, including Linux and *BSD a.out, ELF, Mach-O,
-                        16-bit and 32-bit .obj (OMF) format, COFF (including its Win32 and Win64 variants.)</p>
-                </div>
-            </div>
-        </body>
-    </head>
-</html>
diff --git a/templates/content.html b/templates/content.html
index 5f177fc..693d7bd 100644
--- a/templates/content.html
+++ b/templates/content.html
@@ -1,151 +1,34 @@
 <!DOCTYPE html>
-<html lang="en">
-
+<html>
 <head>
-    <meta charset="UTF-8">
-    <title>{% block title %}🫐artberry🫐{% endblock %}</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
-    <link rel="icon" href="{{ url_for('static', filename='artberry.ico') }}" type="image/x-icon">
-    {% if extra_css %}
-    <link rel="stylesheet" href="{{ url_for('static', filename=extra_css) }}">
-    {% endif %}
-    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap" rel="stylesheet">
-</head>
-
 <body>
     {% include 'navbar.html' %}
-
-    <header class="header">
-        <form method="GET"
-            action="{{ search_url if search_url else url_for(request.endpoint, pub_type=pub_type, username=username) }}"
-            class="search-form">
-      <!--  </form>
-        <div id="autocomplete-suggestions" class="autocomplete-suggestions"></div>
-        </form>
-   подсказки будут добавлены позже -->
-    </header>
-<section class="content" id="content">
-        {% block content %}
-        {% if content_type in ['art', 'video', 'comic'] %}
-            <div class="{{ content_type }}-details">
-                <h2>{{ content.title }}</h2>
-                {% if content_type == 'art' %}
-                    <img src="{{ url_for('static', filename='uploads/' + content.filename) }}" alt="{{ content.title }}"
-                        class="art-image" loading="lazy" width="800" height="600">
-                {% elif content_type == 'video' %}
-                    <video controls class="video-player">
-                        <source src="{{ url_for('static', filename='uploads/videos/' + content.filename) }}" type="video/mp4">
-                        Your browser does not support the video tag.
-                    </video>
-                {% elif content_type == 'comic' %}
-                    <div class="comic-pages">
-                        {% for page in content.pages %}
-                            <img src="{{ url_for('static', filename='uploads/comics/' + content.name + '/' + page) }}"
-                                alt="Comic Page {{ loop.index }}" class="comic-page">
-                        {% endfor %}
-                    </div>
-                {% endif %}
-            </div>
-        {% else %}
-        {% endif %}
-        {% endblock %}
-    </section>
-
-
- <!--   {% if pagination %}
-    <div class="pagination">
-        {% if pagination.has_prev %}
-        <a href="{{ url_for(request.endpoint, page=pagination.prev_num, search=request.args.get('search')) }}"
-            class="button">«</a>
-        {% endif %}
-        {% for page in pagination.iter_pages() %}
-        {% if page %}
-        <a href="{{ url_for(request.endpoint, page=page, search=request.args.get('search')) }}" class="button"
-            style="{% if page == pagination.page %}color: yellow;{% endif %}">
-            {{ page }}
-        </a>
-        {% endif %}
-        {% endfor %}
-        {% if pagination.has_next %}
-        <a href="{{ url_for(request.endpoint, page=pagination.next_num, search=request.args.get('search')) }}"
-            class="button">»</a>
-        {% endif %}
-    </div>
-    {% endif %} -->
-
-    <div class="modal-overlay" id="ageVerificationModal">
-        <div class="modal-content">
-            <p>By clicking "Yes", you agree that you are of legal age according to your state/city/province/country.</p>
-            <div class="modal-buttons">
-                <button class="modal-button" id="yesButton">Yes</button>
-                <button class="modal-button cancel" id="noButton">No</button>
-            </div>
+    {% include 'subnav.html' %}
+    {% include 'tags_list.html' %}
+    {% block content %}
+        {% block new_content %}
+        <div class="container new-content">
+            <a class="new-content-text">НОВИНКИ</a>
+            <button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
+        </div>
+        {% endblock %}
+        
+        <div class="container popular-content">
+            <a class="popular-content-text">ПОПУЛЯРНОЕ</a>
+            <button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
         </div>
-    </div>
 
-<!--   <script>
-        window.onload = function () {
-            var modal = document.getElementById('ageVerificationModal');
-            var body = document.body;
-            var content = document.getElementById('content');
+        <div class="container viewed-content">
+            <a class="viewed-content-text">ПРОСМАТРИВАЕМОЕ</a>
+            <button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
+        </div>
 
-            if (document.cookie.indexOf('ageVerified=true') !== -1) {
-                return;
-            }
-
-            modal.style.display = 'flex';
-            content.classList.add('blur');
-
-            document.getElementById('yesButton').addEventListener('click', function () {
-                modal.style.display = 'none';
-                content.classList.remove('blur');
-                document.cookie = "ageVerified=true; path=/; max-age=31536000";
-            });
-
-
-            document.getElementById('noButton').addEventListener('click', function () {
-                window.location.href = 'https://www.google.com/search?q=cats';
-            });
-        };
-
-        document.getElementById('search-input').addEventListener('input', function () {
-            var query = this.value;
-
-            if (query.length < 2) {
-                document.getElementById('autocomplete-suggestions').innerHTML = '';
-                return;
-            }
-
-            fetch(`/autocomplete?search=${encodeURIComponent(query)}`)
-                .then(response => response.json())
-                .then(data => {
-                    var suggestionsContainer = document.getElementById('autocomplete-suggestions');
-                    suggestionsContainer.innerHTML = '';
-
-                    if (data.length > 0) {
-                        data.forEach(function (suggestion) {
-                            var suggestionElement = document.createElement('div');
-                            suggestionElement.classList.add('suggestion-item');
-                            suggestionElement.textContent = suggestion;
-                            suggestionElement.addEventListener('click', function () {
-                                var searchInput = document.getElementById('search-input');
-                                var currentValue = searchInput.value;
-
-                                var tags = currentValue.split(',').map(tag => tag.trim());
-                                tags[tags.length - 1] = suggestion;
-
-                                searchInput.value = tags.join(', ');
-
-                                suggestionsContainer.innerHTML = '';
-                            });
-                            suggestionsContainer.appendChild(suggestionElement);
-                        });
-                    }
-                })
-                .catch(error => console.error('Error fetching autocomplete data:', error));
-        });
-    </script> -->
+        <div class="container popular-categories">
+            <a class="popular-categories-text">ПОПУЛЯРНЫЕ КАТЕГОРИИ</a>
+            <button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
+        </div>
+    {% endblock %}
 </body>
-
+</head>
 </html>
\ No newline at end of file
diff --git a/templates/gifs.html b/templates/gifs.html
new file mode 100644
index 0000000..97f819b
--- /dev/null
+++ b/templates/gifs.html
@@ -0,0 +1 @@
+{% include 'navbar.html' %}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 13b4ff5..8e3afd0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,16 +1,14 @@
 {% extends "content.html" %}
+{% include 'subnav.html' %}
+{% block title %}🫐videos - artberry🫐{% endblock %}
 
-{% block title %}🫐arts - artberry🫐{% endblock %}
+{% block new_content %}
+<div class="container new-content">
+    <a class="new-content-text">НОВИНКИ (Updated for Videos)</a>
+    <button class="view-more-button"><span class="new-context-button-text">Смотреть Больше</span></button>
+</div>
+{% endblock %}
 
 {% block content %}
-<section class="gallery">
-    {% for image in images %}
-        <div class="card">
-            <a href="{{ url_for('view', content_type='art', id=image.id) }}" class="card-link">
-                <img src="{{ url_for('static', filename='arts/' + image.image_file) }}" alt="Art Image" class="art-image">
-                <p>{{ image.cookie_votes }} 🍪</p>
-            </a>
-        </div>
-    {% endfor %}
-</section>
-{% endblock %}
+    {% include 'tags_list.html' %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/navbar.html b/templates/navbar.html
index cca427b..da34541 100644
--- a/templates/navbar.html
+++ b/templates/navbar.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Navbar</title>
-</head>
+<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
 <body>
     <div class="navbar">
         <img src="{{ url_for('static', filename='navbar/logo.svg') }}" alt="Логотип" class="logo">
@@ -47,256 +47,8 @@
             <button class="login-btn">ВОЙТИ</button>
         </div>
     </div>
-    <style>
-        .navbar {
-            width: 100%;
-            max-width: 1500px;
-            height: 120px;
-            background: #05040A;
-            display: flex;
-            align-items: center;
-            padding: 0 20px;
-            gap: 20px;
-            margin: 0 auto;
-        }
-        .logo {
-            width: 307px;
-            height: 60px;
-        }
-        .search-container {
-            display: flex;
-            align-items: center;
-            width: 452.5px;
-            height: 27px;
-            border: 1px solid #8784C9;
-            border-radius: 20px;
-            padding: 15px;
-            background: #05040A;
-            position: relative;
-            transition: border-color 0.3s ease;
-        }
-        .search-icon-container {
-            position: relative;
-            width: 24px;
-            height: 24px;
-            margin-right: 10px;
-        }
-        .search-icon,
-        .search-hover-icon {
-            width: 24px;
-            height: 24px;
-            position: absolute;
-            top: 0;
-            left: 0;
-            transition: opacity 0.3s ease;
-        }
-        .search-hover-icon {
-            opacity: 0;
-        }
-        .search-container:hover .search-hover-icon,
-        .search-container:focus-within .search-hover-icon {
-            opacity: 1;
-        }
 
-        .search-container:hover .search-icon,
-        .search-container:focus-within .search-icon {
-            opacity: 0;
-        }
-
-        .search-input {
-            border: none;
-            outline: none;
-            flex-grow: 1;
-            font-size: 16px;
-            height: 24px;
-            color: #8784C9;
-            background-color: #05040A;
-        }
-
-        .search-container:hover {
-            border-color: #3C3882;
-        }
-
-        .search-container:focus-within {
-            border-color: #3C3882;
-        }
-
-        .icon-container {
-            display: flex;
-            align-items: center;
-            margin-left: 10px;
-        }
-
-        .video-icon {
-            width: 24px;
-            height: 24px;
-            margin-left: 10px;
-        }
-        .tray-icon {
-            width: 11px;
-            height: 7px;
-            margin-left: 5px;
-        }
-        .translate-btn {
-            position: relative;
-            width: 23px;
-            height: 27px;
-            border: 1px solid #8784C9;
-            border-radius: 10px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: #05040A;
-            cursor: pointer;
-            padding: 15px;
-            transition: border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
-        }
-        .translate-icon,
-        .translate-hover-icon {
-            width: 24px;
-            height: 24px;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            transition: opacity 0.3s ease;
-        }
-        .translate-hover-icon {
-            opacity: 0;
-        }
-        .translate-btn:hover .translate-hover-icon {
-            opacity: 1;
-        }
-
-        .translate-btn:hover .translate-icon {
-            opacity: 0;
-        }
-        .translate-btn:hover {
-            border-color: #3C3882;
-        }
-        .overlay-icon {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 20px;
-            height: 20px;
-            opacity: 0.7;
-        }
-        .menu {
-            display: flex;
-            font-family: Nunito, sans-serif;
-            gap: 22px;
-            width: 519.5px;
-            height: 22px;
-            justify-content: space-between;
-            padding-left: 60px;
-            padding-right: 60px;
-        }
-        .menu a {
-            text-decoration: none;
-            color: #8784C9;
-            font-size: 16px;
-            transition: color 0.3s ease;
-        }
-        .menu a:hover {
-            color: #3C3882;
-        }
-        .auth-container {
-            display: flex;
-            align-items: center;
-            margin-left: auto;
-        }
-        .discord-icon-container {
-            position: relative;
-            width: 42px;
-            height: 42px;
-        }
-        .discord-icon,
-        .discord-hover-icon {
-            width: 42px;
-            height: 42px;
-            position: absolute;
-            top: 0;
-            left: 0;
-            transition: opacity 0.3s ease;
-        }
-        .discord-hover-icon {
-            opacity: 0;
-        }
-        .discord-icon-container:hover .discord-hover-icon {
-            opacity: 1;
-        }
-        .discord-icon-container:hover .discord-icon {
-            opacity: 0;
-        }
-        .login-btn {
-            width: 87px;
-            height: 42px;
-            border-radius: 20px;
-            background: #8784C9;
-            border: 1px solid #8784C9;
-            padding: 10px 15px;
-            font-size: 16px;
-            font-family: Nunito, sans-serif;
-            font-weight: 500;
-            line-height: 21.82px;
-            letter-spacing: 0%;
-            color: #05040A;
-            cursor: pointer;
-            margin-left: 10px;
-            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
-        }
-        .login-btn:hover {
-            background-color: #3C3882;
-            color: #05040A;
-            border-color: #3C3882;
-        }
-        .dropdown-menu {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    background: #05040A;
-    border: 1px solid #3C3882;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    display: none;
-    flex-direction: column;
-    width: 150px;
-    z-index: 10;
-}
-.dropdown-item {
-    padding: 10px 15px;
-    font-size: 14px;
-    border-radius:4px;
-    color: #8784C9;
-    cursor: pointer;
-    transition: background 0.3s ease, color 0.3s ease;
-}
-.dropdown-item:hover {
-    background: #3C3882;
-    color: white;
-}
-    </style>
-    <script>
-        document.addEventListener('DOMContentLoaded', function () {
-    const iconContainer = document.querySelector('.icon-container');
-    const dropdownMenu = document.querySelector('.dropdown-menu');
-
-    iconContainer.addEventListener('click', function (event) {
-        dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
-        event.stopPropagation();
-    });
-
-    document.addEventListener('click', function () {
-        dropdownMenu.style.display = 'none';
-    });
-
-    dropdownMenu.addEventListener('click', function (event) {
-        event.stopPropagation();
-    });
-});
-    </script>
+<script src="{{ url_for('static', filename='js/navbar.js') }}"></script>
 </body>
-
+</head>
 </html>
\ No newline at end of file
diff --git a/templates/subnav.html b/templates/subnav.html
new file mode 100644
index 0000000..2d40bbd
--- /dev/null
+++ b/templates/subnav.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Subnav</title>
+    <style>
+        body {
+            margin: 0;
+            display: flex;
+            justify-content: center;
+        }
+
+        .subnav-container {
+            max-width: 1500px;
+            height: 50px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: #3C3882;
+            padding: 0 20px;
+            box-sizing: border-box;
+            position: absolute;
+            top: 168px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        .button {
+            width: 375px;
+            height: 50px;
+            background-color: #3C3882;
+            border: none;
+            font-size: 16px;
+            cursor: pointer;
+            color: #8784C9;
+            box-sizing: border-box;
+        }
+
+        .button:nth-child(1) { padding: 15px 139px; }
+        .button:nth-child(2) { padding: 15px 134px; }
+        .button:nth-child(3) { padding: 15px 136px; }
+        .button:nth-child(4) { padding: 15px 136px; }
+    </style>
+</head>
+<body>
+    <div class="subnav-container">
+        <button class="button">ТЕГИ</button>
+        <button class="button">КАТЕГОРИИ</button>
+        <button class="button">ПЕРСОНАЖИ</button>
+        <button class="button">КОЛЛЕКЦИИ</button>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/tags_list.html b/templates/tags_list.html
new file mode 100644
index 0000000..c113432
--- /dev/null
+++ b/templates/tags_list.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tags List</title>
+<body>
+    <div class="tags-container">
+        {% for tag in tags %}
+            <button class="tag">{{ tag }}</button>
+        {% endfor %}
+        <button class="list-button">
+            <img src="{{ url_for('static', filename='icons/list-icon.svg') }}" alt="List Icon">
+        </button>
+        <div class="taglist-shadow"></div>
+    </div>
+    <script src="{{ url_for('static', filename='js/taglist.js') }}"></script>
+</body>
+</head>
+</html>
\ No newline at end of file
diff --git a/templates/videos.html b/templates/videos.html
index c231258..e69de29 100644
--- a/templates/videos.html
+++ b/templates/videos.html
@@ -1,27 +0,0 @@
-{% extends "content.html" %}
-
-{% block title %}🫐videos - artberry🫐{% endblock %}
-
-{% block content %}
-<section class="gallery">
-    {% for video in videos %}
-        <div class="card video-card">
-            <a href="{{ url_for('view', content_type='video', id=video.id) }}">
-                <img src="{{ url_for('static', filename='thumbnails/' + video.video_thumbnail_file) }}" alt="Video Thumbnail" class="video-thumbnail">
-            </a>
-            <p class="video-title">{{ video.video_name }}</p>
-
-            <p>{{ video.cookie_votes }} 🍪</p>
-        </div>
-    {% endfor %}
-</section>
-
-<div class="pagination">
-    {% if pagination.has_prev %}
-        <a href="{{ url_for('videos', page=pagination.prev_num, search=search_query) }}" class="button">Previous</a>
-    {% endif %}
-    {% if pagination.has_next %}
-        <a href="{{ url_for('videos', page=pagination.next_num, search=search_query) }}" class="button">Next</a>
-    {% endif %}
-</div>
-{% endblock %}
diff --git a/templates/view.html b/templates/view.html
index 0cea148..ec58671 100644
--- a/templates/view.html
+++ b/templates/view.html
@@ -96,7 +96,7 @@
             <button type="submit" class="button">Post Comment</button>
         </form>
         {% else %}
-        <p>You need to <a href="{{ url_for('login') }}">log in</a> to post a comment.</p>
+        <p>You need to <a href="{{ url_for('auth.login') }}">log in</a> to post a comment.</p>
         {% endif %}
     </section>
     {% endif %}
@@ -125,7 +125,7 @@
             <button type="submit" class="button">Vote</button>
         </form>
         {% else %}
-        <p>You need to <a href="{{ url_for('login') }}">log in</a> to vote.</p>
+        <p>You need to <a href="{{ url_for('auth.login') }}">log in</a> to vote.</p>
         {% endif %} 
     </div>
 </body>