diff --git a/.github/workflows/django.yml b/.github/workflows/django.yml
index afb15c9..e04e03d 100644
--- a/.github/workflows/django.yml
+++ b/.github/workflows/django.yml
@@ -27,8 +27,13 @@ jobs:
     - name: Set Environment Variables
       env:
         SECRET_KEY: ${{ secrets.SECRET_KEY }}
-      run: echo "SECRET_KEY=${SECRET_KEY}" > /home/runner/work/Albercan-Backend/Albercan-Backend/envs/.env
+        STATIC_ROOT: ${{ secrets.STATIC_ROOT }}
+      run: |
+        echo "SECRET_KEY=${SECRET_KEY}" > ./envs/.env
+        echo "STATIC_ROOT=${STATIC_ROOT}" >> ./envs/.env
     - name: Install Dependencies
       run: poetry install
+    - name: Collect Static Files
+      run: poetry run python manage.py collectstatic --no-input
     - name: Run Tests
-      run: poetry run python manage.py test
\ No newline at end of file
+      run: poetry run python manage.py test
diff --git a/README.md b/README.md
index 64775ca..1a33599 100644
--- a/README.md
+++ b/README.md
@@ -37,4 +37,7 @@ poetry install
 2. Ejecuta el servidor de desarrollo de Django:
 ```bash
 poetry run python manage.py runserver
-```
\ No newline at end of file
+```
+
+## Errors
+En ocasiones los tests no corren porque el STORAGES.staticfiles apunta a whitenoise, pero si lo usamos por el que usa django por defecto ```django.contrib.staticfiles.storage.StaticFilesStorage``` anda todo bien.
\ No newline at end of file
diff --git a/albercan_backend/settings.py b/albercan_backend/settings.py
index 6e2ad27..6308e5b 100644
--- a/albercan_backend/settings.py
+++ b/albercan_backend/settings.py
@@ -23,12 +23,12 @@
 # See https://docs.djangoproject.com/en/5.0/howto/deployment/checklist/
 
 # SECURITY WARNING: keep the secret key used in production secret!
-SECRET_KEY = env('SECRET_KEY')
+SECRET_KEY = env("SECRET_KEY")
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = env.BOOL('DEBUG', False)
+DEBUG = env.BOOL("DEBUG", False)
 
-ALLOWED_HOSTS = env.LIST('ALLOWED_HOSTS', [])
+ALLOWED_HOSTS = env.LIST("ALLOWED_HOSTS", [])
 
 # Application definition
 
@@ -41,11 +41,13 @@
     "django.contrib.staticfiles",
     "people",
     "pet",
-    "structure"
+    "structure",
+    "authentication",
 ]
 
 MIDDLEWARE = [
     "django.middleware.security.SecurityMiddleware",
+    "whitenoise.middleware.WhiteNoiseMiddleware",
     "django.contrib.sessions.middleware.SessionMiddleware",
     "django.middleware.common.CommonMiddleware",
     "django.middleware.csrf.CsrfViewMiddleware",
@@ -59,7 +61,7 @@
 TEMPLATES = [
     {
         "BACKEND": "django.template.backends.django.DjangoTemplates",
-        "DIRS": [BASE_DIR / PROJECT_NAME / 'templates'],
+        "DIRS": [BASE_DIR / PROJECT_NAME / "templates"],
         "APP_DIRS": True,
         "OPTIONS": {
             "context_processors": [
@@ -135,11 +137,21 @@
 STATIC_ROOT = env("STATIC_ROOT")  # This is when I run the app in prod
 STATIC_ROOT = f"{(BASE_DIR / STATIC_ROOT).absolute()}" if STATIC_ROOT else None
 
-STATICFILES_DIRS = [
-    BASE_DIR / PROJECT_NAME / "static"
-]
+STATICFILES_DIRS = [BASE_DIR / PROJECT_NAME / "static"]
 
+STORAGES = {
+    "default": {
+        "BACKEND": "django.core.files.storage.FileSystemStorage",
+    },
+    "staticfiles": {
+        "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
+    },
+}
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
+
+LOGIN_REDIRECT_URL = "/index"
+LOGOUT_REDIRECT_URL = "/auth/login"
+CSRF_COOKIE_SECURE = True
diff --git a/albercan_backend/static/css/navbar.css b/albercan_backend/static/css/navbar.css
index 726198b..7e890b1 100644
--- a/albercan_backend/static/css/navbar.css
+++ b/albercan_backend/static/css/navbar.css
@@ -71,4 +71,13 @@ header .navbar .dropdown-menu .dropdown-item.active:hover {
 header .navbar .dropdown-menu .dropdown-item.active {
   background: #bc5148;
   color: #fff;
+}
+
+#logout-form {
+  display: inline;
+}
+#logout-form button {
+  background: none;
+  border: none;
+  cursor: pointer;
 }
\ No newline at end of file
diff --git a/albercan_backend/templates/base.html b/albercan_backend/templates/base.html
index 4fdfd01..d68a3c2 100644
--- a/albercan_backend/templates/base.html
+++ b/albercan_backend/templates/base.html
@@ -20,6 +20,7 @@
     <!-- FontAwesome -->
     <script src="https://kit.fontawesome.com/31b739dec4.js" crossorigin="anonymous"></script>
     <link rel="stylesheet" href={% static "css/base.css" %}>
+    <link rel="stylesheet" href={% static "css/navbar.css" %}>
     <!-- Additional Styling -->
     {% block styles %}{% endblock %}
   </head>
diff --git a/albercan_backend/templates/navbar.html b/albercan_backend/templates/navbar.html
index c15d4cd..7414d17 100644
--- a/albercan_backend/templates/navbar.html
+++ b/albercan_backend/templates/navbar.html
@@ -1,7 +1,7 @@
 <!-- navbar.html -->
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container">
-    <a class="navbar-brand" href="#">AlberCan</a>
+    <a class="navbar-brand" href="{% url 'pet:main_page' %}">AlberCan</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
             data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
             aria-expanded="false" aria-label="Toggle navigation">
@@ -30,6 +30,16 @@
         <li class="nav-item">
           <a class="nav-link" href="#">Contáctanos</a>
         </li>
+        <li class="nav-item">
+          {% if request.user.is_authenticated %}
+          <form id="logout-form" method="post" action="{% url 'authentication:logout' %}">
+            {% csrf_token %}
+            <button type="submit" class="nav-link">Cerrar Sesión</button>
+          </form>
+          {% else %}
+            <a class="nav-link" href="{% url 'authentication:login' %}">Iniciar Sesión</a>
+          {% endif %}
+        </li>
       </ul>
     </div>
   </div>
diff --git a/albercan_backend/urls.py b/albercan_backend/urls.py
index faa63e3..a8a8e25 100644
--- a/albercan_backend/urls.py
+++ b/albercan_backend/urls.py
@@ -4,6 +4,8 @@
 from django.urls import include, path
 
 urlpatterns = [
-    path('', include('pet.urls')),
+    path('', include('pet.urls', namespace='pet')),
+    path('', include('people.urls', namespace='people')),
+    path('auth/', include('authentication.urls', namespace='authentication')),
     path("admin/", admin.site.urls),
 ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
diff --git a/people/tests.py b/authentication/__init__.py
similarity index 100%
rename from people/tests.py
rename to authentication/__init__.py
diff --git a/authentication/apps.py b/authentication/apps.py
new file mode 100644
index 0000000..8bab8df
--- /dev/null
+++ b/authentication/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class AuthenticationConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'authentication'
diff --git a/authentication/forms.py b/authentication/forms.py
new file mode 100644
index 0000000..aa59a5a
--- /dev/null
+++ b/authentication/forms.py
@@ -0,0 +1,12 @@
+from django.contrib.auth.forms import AuthenticationForm
+
+
+class UserLoginForm(AuthenticationForm):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.fields['username'].widget.attrs.update({
+            'class': 'form-control',
+        })
+        self.fields['password'].widget.attrs.update({
+            'class': 'form-control',
+        })
diff --git a/authentication/migrations/__init__.py b/authentication/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/authentication/templates/authentication/login_page.html b/authentication/templates/authentication/login_page.html
new file mode 100644
index 0000000..7e2d582
--- /dev/null
+++ b/authentication/templates/authentication/login_page.html
@@ -0,0 +1,112 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}
+    Página de Inicio de Sesión
+{% endblock %}
+
+{% block styles %}
+{% endblock %}
+
+{% block content %}
+<section class="bg-light p-3 p-md-4 p-xl-5">
+  <div class="container">
+    <div>
+      {% if form.non_field_errors %}
+        <ul class="error_messages">
+          {% for error in form.non_field_errors %}
+            <li class="error">{{ error }}</li>
+          {% endfor %}
+        </ul>
+      {% endif %}
+    </div>
+    <div class="row justify-content-center">
+      <div class="col-12 col-xxl-11">
+        <div class="card border-light-subtle shadow-sm">
+          <div class="row g-0">
+            <div class="col-12 col-md-6">
+              <img class="img-fluid rounded-start w-100 h-100 object-fit-cover" loading="lazy" src="https://c1.peakpx.com/wallpaper/917/623/663/mammal-pet-cat-feline-wallpaper.jpg" alt="Welcome back you've been missed!">
+            </div>
+
+            <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
+              <div class="col-12 col-lg-11 col-xl-10">
+                <div class="card-body p-3 p-md-4 p-xl-5">
+                  <div class="row">
+                    <div class="col-12">
+                      <div class="mb-5">
+                        <div class="text-center mb-4">
+                          <!--
+                          <a href="#!">
+                            <img src="#" alt="Albercan Logo" width="175" height="57">
+                          </a>
+                          -->
+                        </div>
+                        <h4 class="text-center">Welcome back you've been missed!</h4>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-12">
+                      <div class="d-flex gap-3 flex-column">
+                        <a href="#!" class="btn btn-lg btn-outline-dark">
+                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-google" viewBox="0 0 16 16">
+                            <path d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z" />
+                          </svg>
+                          <span class="ms-2 fs-6">Log in with Google</span>
+                        </a>
+                      </div>
+                      <p class="text-center mt-4 mb-5">Or log in with</p>
+                    </div>
+                  </div>
+                  <form action="" method="post">
+                    {% csrf_token %}
+                    <div class="row gy-3 overflow-hidden">
+                      <div class="col-12">
+                        <div class="form-floating mb-3">
+                          {{ form.username }}
+                          {{ form.username.label_tag }}
+                        </div>
+                      </div>
+                      <div class="col-12">
+                        <div class="form-floating mb-3">
+                          {{ form.password }}
+                          {{ form.password.label_tag }}
+                        </div>
+                      </div>
+                      <div class="col-12">
+                        <div class="form-check">
+                          <input class="form-check-input" type="checkbox" value="" name="remember_me" id="remember_me">
+                          <label class="form-check-label text-secondary" for="remember_me">
+                            Keep me logged in
+                          </label>
+                        </div>
+                      </div>
+                      <div class="col-12">
+                        <div class="d-grid">
+                          <button class="btn btn-dark btn-lg" type="submit">Log in now</button>
+                        </div>
+                      </div>
+                    </div>
+                  </form>
+
+                  <div class="row">
+                    <div class="col-12">
+                      <div class="d-flex gap-2 gap-md-4 flex-column flex-md-row align-items-center justify-content-md-center mt-3">
+                        <a href="#!" class="link-secondary text-decoration-none">Forgot password</a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+{% endblock %}
+
+{% block scripts %}
+{% endblock %}
\ No newline at end of file
diff --git a/authentication/urls.py b/authentication/urls.py
new file mode 100644
index 0000000..1fdcbe1
--- /dev/null
+++ b/authentication/urls.py
@@ -0,0 +1,20 @@
+from django.contrib.auth.views import LoginView, LogoutView
+from django.urls import path
+
+from authentication.forms import UserLoginForm
+
+app_name = "authentication"
+urlpatterns = [
+    path(
+        "login/",
+        LoginView.as_view(
+            template_name="authentication/login_page.html", form_class=UserLoginForm
+        ),
+        name="login",
+    ),
+    path(
+        "logout/",
+        LogoutView.as_view(),
+        name="logout",
+    ),
+]
diff --git a/entrypoint.sh b/entrypoint.sh
index b5532a3..39f740f 100644
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -2,13 +2,6 @@
 
 python manage.py migrate
 
-echo "
-from django.contrib.auth import get_user_model
-User = get_user_model()
-if not User.objects.filter(username='admin').exists():
-    User.objects.create_superuser('admin', 'admin@gmail.com', 'password_secret')
-" | python manage.py shell
-
 python manage.py collectstatic --no-input
 
 python manage.py runserver 0.0.0.0:8000
diff --git a/people/admin.py b/people/admin.py
index f63ed2f..8c4d687 100644
--- a/people/admin.py
+++ b/people/admin.py
@@ -25,34 +25,30 @@ class BasePersonAdmin(ModelAdmin):
         "user__email",
     ]
     autocomplete_fields = [
-        "user",
         "occupation",
         "city",
         "nationality",
     ]
 
     def picture_display(self, obj=None):
-        return mark_safe(f'<img src="{obj.picture.url}" height=250>')
+        return mark_safe(
+            f'<img style="object-fit: cover;" src="{obj.picture_url}" height=250 width=100%>'
+        )
 
-    picture_display.short_description = _("See picture")
+    picture_display.short_description = _("Profile Picture")
 
-    def get_readonly_fields(self, request, obj=None):
-        return ["picture_display",]
+    readonly_fields = ("picture_display",)
 
     def get_fieldsets(self, request, obj=None):
         if obj is None or not obj.picture:
             main_fields = [
                 ("picture",),
-                ("first_name", "last_name", "gender"),
             ]
         else:
             main_fields = [
                 (
                     "picture_display",
                     "picture",
-                    "first_name",
-                    "last_name",
-                    "gender",
                 ),
             ]
 
@@ -62,7 +58,7 @@ def get_fieldsets(self, request, obj=None):
                 {
                     "fields": main_fields
                     + [
-                        ("city",),
+                        ("first_name", "last_name", "gender", "city"),
                         ("personal_email", "birthday"),
                     ]
                 },
@@ -74,10 +70,10 @@ def get_fieldsets(self, request, obj=None):
                         ("document_type", "document_id"),
                         ("marital_status",),
                         ("phone_number", "secondary_phone_number"),
-                        ("nationality", ),
-                        ("address", ),
-                        ("neighborhood", ),
-                        ("occupation", ),
+                        ("nationality",),
+                        ("address",),
+                        ("neighborhood",),
+                        ("occupation",),
                     ]
                 },
             ),
@@ -86,20 +82,17 @@ def get_fieldsets(self, request, obj=None):
 
 @admin.register(Person)
 class PersonAdmin(BasePersonAdmin):
-
-    def get_fieldsets(self, request, obj=None):
-        fieldsets = super().get_fieldsets(request, obj=obj)
-        return fieldsets
+    list_display = ["first_name", "last_name", "list_pets",]
+    inlines = [
+        PetInline,
+    ]
 
     def has_delete_permission(
         self, request, obj=None
     ):  # This allows to delete only if you're a superuser
         return request.user.is_superuser and request.user.is_active
 
-    inlines = [PetInline,]
-    list_display = ["first_name", "last_name", "list_pets"]
-
     def list_pets(self, obj):
         return ", ".join([str(pet) for pet in obj.pets.all()])
 
-    list_pets.short_description = _("Pets")
+    list_pets.short_description = _("My Pets")
diff --git a/people/apps.py b/people/apps.py
index 91fcc9c..248f327 100644
--- a/people/apps.py
+++ b/people/apps.py
@@ -1,6 +1,11 @@
 from django.apps import AppConfig
+from django.utils.translation import gettext_lazy as _
 
 
 class PeopleConfig(AppConfig):
     default_auto_field = "django.db.models.BigAutoField"
     name = "people"
+    verbose_name = _("People")
+
+    def ready(self):
+        from people import signals  # noqa: F401
diff --git a/people/models.py b/people/models.py
index 4534dfe..af3341a 100644
--- a/people/models.py
+++ b/people/models.py
@@ -145,28 +145,14 @@ class Person(models.Model):
         help_text=_("Max size allowed: 20Mbs"),
     )
 
-    def create_user(self):
-        if self.user_id is not None:
-            return
-        self.user, _ = User.objects.get_or_create(
-            username=self.personal_email,
-            defaults={
-                "email": self.personal_email,
-                "first_name": self.first_name,
-                "last_name": self.last_name,
-                "is_staff": True
-            }
-        )
-
-    def deactivate_user(self):
-        if not self.user_id:
-            return
-        self.user.is_staff = False
-        self.user.is_active = False
-        self.user.save()
-
-    def save(self, *args, **kwargs):
-        super().save(*args, **kwargs)
+    @property
+    def picture_url(self):
+        """
+        Return self.picture.url if self.picture is not None,
+        'url' exist and has a value, else, return None.
+        """
+        if self.picture and hasattr(self.picture, "url"):
+            return self.picture.url
 
     def __str__(self):
         return f"{self.last_name}, {self.first_name}"
diff --git a/people/signals.py b/people/signals.py
new file mode 100644
index 0000000..278a38a
--- /dev/null
+++ b/people/signals.py
@@ -0,0 +1,36 @@
+from django.contrib.auth.models import User
+from django.db.models.signals import post_save
+from django.dispatch import receiver
+
+from people.models import Person
+
+
+@receiver(post_save, sender=Person)
+def create_user_for_person(
+    sender: Person, instance: Person, created: bool, **kwargs
+):
+    if created and not instance.user:
+        create_user(instance)
+
+
+def create_user(person: Person):
+    user, created = User.objects.get_or_create(
+        username=person.personal_email,
+        defaults={
+            "email": person.personal_email,
+            "first_name": person.first_name,
+            "last_name": person.last_name,
+            "is_staff": True,
+        },
+    )
+    if created:
+        person.user = user
+        person.save()
+
+
+def deactivate_user(person: Person):
+    if not person.user_id:
+        return
+    person.user.is_staff = False
+    person.user.is_active = False
+    person.user.save()
diff --git a/people/templates/people/members.html b/people/templates/people/members.html
new file mode 100644
index 0000000..01f6be0
--- /dev/null
+++ b/people/templates/people/members.html
@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}
+    Nuestros Miembros
+{% endblock %}
+
+{% block styles %}
+{% endblock %}
+
+{% block content %}
+
+<ul>
+  {% for person in people %}
+    <li>{{ person }}</li>
+  {% endfor %}
+</ul>
+
+
+
+{% endblock %}
+
+{% block scripts %}
+{% endblock %}
\ No newline at end of file
diff --git a/people/urls.py b/people/urls.py
new file mode 100644
index 0000000..bc241d9
--- /dev/null
+++ b/people/urls.py
@@ -0,0 +1,8 @@
+from django.urls import path
+
+from people.views import PersonListView
+
+app_name = "people"
+urlpatterns = [
+    path("members/", PersonListView.as_view(), name="member-list"),
+]
diff --git a/people/views.py b/people/views.py
index e69de29..fc5ecad 100644
--- a/people/views.py
+++ b/people/views.py
@@ -0,0 +1,12 @@
+from django.utils.decorators import method_decorator
+from django.views.decorators.http import require_http_methods
+from django.views.generic import ListView
+
+from people.models import Person
+
+
+@method_decorator(require_http_methods(["GET"]), name='dispatch')
+class PersonListView(ListView):
+    queryset = Person.objects.filter(user__is_active=True)
+    context_object_name = "people"
+    template_name = "people/members.html"
diff --git a/pet/admin.py b/pet/admin.py
index 0f87689..7e9b6d9 100644
--- a/pet/admin.py
+++ b/pet/admin.py
@@ -1,4 +1,6 @@
 from django.contrib import admin
+from django.utils.safestring import mark_safe
+from django.utils.translation import gettext_lazy as _
 
 from pet.filters import HasOwnerFilter
 from pet.models import Breed, Pet
@@ -8,9 +10,33 @@
 class PetAdmin(admin.ModelAdmin):
     search_fields = ["name", "owner"]
     list_display = ("name", "breed", "gender", "age", "owner", "has_owner", "is_neutered")
-    readonly_fields = ("age", )
+    readonly_fields = ("age", "picture_display",)
     list_filter = (HasOwnerFilter,)
 
+    def picture_display(self, obj=None):
+        return mark_safe(
+            f'<img style="object-fit: cover;" src="{obj.picture_url}" height=250 width=100%>'
+        )
+
+    picture_display.short_description = _("Profile Picture")
+
+    def get_fieldsets(self, request, obj=None):
+        if obj is None or not obj.picture_url:
+            picture_fields = [
+                ("picture",),
+            ]
+        else:
+            picture_fields = [
+                ("picture_display", "picture"),
+            ]
+        return (
+            (
+                None, {
+                    "fields": picture_fields + [("name", "breed", "gender", "age"), ]
+                }
+            ),
+        )
+
 
 @admin.register(Breed)
 class BreedAdmin(admin.ModelAdmin):
@@ -19,4 +45,5 @@ class BreedAdmin(admin.ModelAdmin):
 
 class PetInline(admin.TabularInline):
     model = Pet
+    fields = ("name", "breed", "gender")
     extra = 0
diff --git a/pet/static/pet/js/carousel.js b/pet/static/pet/js/carousel.js
index bace4d9..00aed83 100644
--- a/pet/static/pet/js/carousel.js
+++ b/pet/static/pet/js/carousel.js
@@ -1,59 +1,47 @@
+const wrapper = document.querySelector(".wrapper-carousel");
 const carousel = document.querySelector(".carousel-secondary");
+const firstCardWidth = carousel.querySelector(".card-secondary").offsetWidth;
 const arrowBtns = document.querySelectorAll(".wrapper-carousel i");
-let carouselChildren = [...carousel.children];
-const cardCount = carouselChildren.length;
+const carouselChildren = [...carousel.children];
 
-let isDragging = false, startX, startScrollLeft;
+let isDragging = false, isAutoPlay = false, startX, startScrollLeft, timeoutId;
 
-function getFirstCardWidth() {
-    return carousel.querySelector("ul > li.card-secondary").offsetWidth; // 1st secondary-card
-}
+// Get the number of cards that can fit in the carousel at once
+let cardPerView = Math.round(carousel.offsetWidth / firstCardWidth);
 
-function getCardPerView() {
-    return Math.round(carousel.offsetWidth / getFirstCardWidth());
-}
+// Insert copies of the last few cards to beginning of carousel for infinite scrolling
+carouselChildren.slice(-cardPerView).reverse().forEach(card => {
+    carousel.insertAdjacentHTML("afterbegin", card.outerHTML);
+});
 
-// Add event listeners for the arrow buttons to scroll the carousel left and right
-function addArrowButtonListeners() {
-    arrowBtns.forEach(btn => {
-        btn.addEventListener("click", () => {
-            let firstCardWidth = getFirstCardWidth();
-            carousel.scrollLeft += btn.id === "left" ? -firstCardWidth : firstCardWidth;
+// Insert copies of the first few cards to end of carousel for infinite scrolling
+carouselChildren.slice(0, cardPerView).forEach(card => {
+    carousel.insertAdjacentHTML("beforeend", card.outerHTML);
+});
 
-            if (btn.id === "left") {
-                // Remove the last card and add it to the beginning
-                let lastCard = carouselChildren.pop();
-                carouselChildren.unshift(lastCard);
-                carousel.insertBefore(lastCard, carousel.firstChild);
-            } else {
-                // Remove the first card and add it to the end
-                let firstCard = carouselChildren.shift();
-                carouselChildren.push(firstCard);
-                carousel.removeChild(firstCard);
-                carousel.appendChild(firstCard);
-            }
-        });
-    });
-}
+// Scroll the carousel at appropriate position to hide first few duplicate cards on Firefox
+carousel.classList.add("no-transition");
+carousel.scrollLeft = carousel.offsetWidth;
+carousel.classList.remove("no-transition");
 
-function checkArrowVisibility() {
-    let cardPerView = getCardPerView();
-    if (cardCount >= cardPerView) {
-        arrowBtns.forEach(btn => btn.style.display = "block");
-    } else {
-        arrowBtns.forEach(btn => btn.style.display = "none");
-    }
-}
+// Add event listeners for the arrow buttons to scroll the carousel left and right
+arrowBtns.forEach(btn => {
+    btn.addEventListener("click", () => {
+        carousel.scrollLeft += btn.id === "left" ? -firstCardWidth : firstCardWidth;
+    });
+});
 
 const dragStart = (e) => {
     isDragging = true;
     carousel.classList.add("dragging");
+    // Records the initial cursor and scroll position of the carousel
     startX = e.pageX;
     startScrollLeft = carousel.scrollLeft;
 }
 
 const dragging = (e) => {
-    if(!isDragging) return;
+    if(!isDragging) return; // if isDragging is false return from here
+    // Updates the scroll position of the carousel based on the cursor movement
     carousel.scrollLeft = startScrollLeft - (e.pageX - startX);
 }
 
@@ -62,9 +50,35 @@ const dragStop = () => {
     carousel.classList.remove("dragging");
 }
 
-addArrowButtonListeners();
-window.addEventListener("load", checkArrowVisibility);
-window.addEventListener("resize", checkArrowVisibility);
+const infiniteScroll = () => {
+    // If the carousel is at the beginning, scroll to the end
+    if(carousel.scrollLeft === 0) {
+        carousel.classList.add("no-transition");
+        carousel.scrollLeft = carousel.scrollWidth - (2 * carousel.offsetWidth);
+        carousel.classList.remove("no-transition");
+    }
+    // If the carousel is at the end, scroll to the beginning
+    else if(Math.ceil(carousel.scrollLeft) === carousel.scrollWidth - carousel.offsetWidth) {
+        carousel.classList.add("no-transition");
+        carousel.scrollLeft = carousel.offsetWidth;
+        carousel.classList.remove("no-transition");
+    }
+
+    // Clear existing timeout & start autoplay if mouse is not hovering over carousel
+    clearTimeout(timeoutId);
+    if(!wrapper.matches(":hover")) autoPlay();
+}
+
+const autoPlay = () => {
+    if(window.innerWidth < 800 || !isAutoPlay) return; // Return if window is smaller than 800 or isAutoPlay is false
+    // Autoplay the carousel after every 2500 ms
+    timeoutId = setTimeout(() => carousel.scrollLeft += firstCardWidth, 2500);
+}
+autoPlay();
+
 carousel.addEventListener("mousedown", dragStart);
 carousel.addEventListener("mousemove", dragging);
-document.addEventListener("mouseup", dragStop);
\ No newline at end of file
+document.addEventListener("mouseup", dragStop);
+carousel.addEventListener("scroll", infiniteScroll);
+wrapper.addEventListener("mouseenter", () => clearTimeout(timeoutId));
+wrapper.addEventListener("mouseleave", autoPlay);
\ No newline at end of file
diff --git a/pet/templates/pet/our_pets_section.html b/pet/templates/pet/our_pets_section.html
index 52ddc96..2392a92 100644
--- a/pet/templates/pet/our_pets_section.html
+++ b/pet/templates/pet/our_pets_section.html
@@ -4,10 +4,7 @@
       <div class="col-md-8 text-center">
         <h1 class="heading mb-4">Conoce a nuestras adorables mascotas</h1>
         <p class="mb-4 lead">
-          Cada día es una oportunidad para conocer a nuestras adorables mascotas. Cada una de ellas tiene una historia
-          única y está esperando a alguien especial como tú. Nuestras mascotas son cariñosas, juguetonas y están listas
-          para ser parte de tu familia. ¡Ven y descubre el amor incondicional que una mascota puede ofrecer! Recuerda,
-          adoptar una mascota no solo cambia la vida de la mascota, sino también la tuya.
+          Cada día es una oportunidad para conocer a nuestras adorables mascotas. Son cariñosas, juguetonas y están listas para ser parte de tu familia. Ven y descubre el amor incondicional que una mascota puede ofrecer. Recuerda, adoptar una mascota no solo cambia la vida de la mascota, sino también la tuya. 🐾❤️
         </p>
         <p class="mb-0">
           <a href="#" class="btn btn-primary">Descubre más sobre nuestras mascotas</a>
diff --git a/pet/templates/pet/secondary_carousel.html b/pet/templates/pet/secondary_carousel.html
index 660dd76..13b5dc8 100644
--- a/pet/templates/pet/secondary_carousel.html
+++ b/pet/templates/pet/secondary_carousel.html
@@ -1,17 +1,19 @@
 <div class="container">
-  <div class="wrapper-carousel">
-    <i id="left" class="fa-solid fa-angle-left"></i>
-    <ul class="carousel-secondary">
-      {% for pet in pets %}
-        <li class="card-secondary">
-          <div class="card-img">
-            <img src="{{ pet.picture_url }}" alt="Pet: {{ pet.name }}" draggable="false">
-          </div>
-          <h2>{{ pet.name }}</h2>
-          <span>{{ pet.age }}</span>
-        </li>
-      {% endfor %}
-    </ul>
-    <i id="right" class="fa-solid fa-angle-right"></i>
-  </div>
-</div>
\ No newline at end of file
+  {% if pets %}
+    <div class="wrapper-carousel">
+      <i id="left" class="fa-solid fa-angle-left"></i>
+      <ul class="carousel-secondary">
+        {% for pet in pets %}
+          <li class="card-secondary">
+            <div class="card-img">
+              <img src="{{ pet.picture_url|default:'#' }}" alt="Pet: {{ pet.name }}" draggable="false">
+            </div>
+            <h2>{{ pet.name }}</h2>
+            <span>{{ pet.age }}</span>
+          </li>
+        {% endfor %}
+      </ul>
+      <i id="right" class="fa-solid fa-angle-right"></i>
+    </div>
+  {% endif %}
+</div>
diff --git a/pet/tests.py b/pet/tests.py
index 69a89d9..be557b0 100644
--- a/pet/tests.py
+++ b/pet/tests.py
@@ -24,25 +24,25 @@ def setUp(self):
         )
 
     def test_main_page_status_code(self):
-        response = self.client.get(reverse("main_page"))
+        response = self.client.get(reverse("pet:main_page"))
         self.assertEqual(response.status_code, 200)
 
     def test_main_page_template_used(self):
-        response = self.client.get(reverse("main_page"))
+        response = self.client.get(reverse("pet:main_page"))
         self.assertTemplateUsed(response, "pet/main_page.html")
 
     def test_main_page_contains_correct_html(self):
-        response = self.client.get(reverse("main_page"))
+        response = self.client.get(reverse("pet:main_page"))
         self.assertContains(response, "¡Haz un cambio hoy!")
         self.assertContains(response, "Pet1")
         self.assertContains(response, "Pet2")
 
     def test_main_page_does_not_contain_incorrect_html(self):
-        response = self.client.get(reverse("main_page"))
+        response = self.client.get(reverse("pet:main_page"))
         self.assertNotContains(response, "Hello, world!")
 
     def test_main_page_context(self):
-        response = self.client.get(reverse("main_page"))
+        response = self.client.get(reverse("pet:main_page"))
         self.assertTrue("pets" in response.context)
         self.assertTrue("headlines" in response.context)
         self.assertEqual(len(response.context["pets"]), 2)
diff --git a/pet/urls.py b/pet/urls.py
index ca572c0..cbd96a3 100644
--- a/pet/urls.py
+++ b/pet/urls.py
@@ -2,6 +2,7 @@
 
 from pet.views import main_page
 
+app_name = 'pet'
 urlpatterns = [
     path("index/", main_page, name="main_page"),
 ]
diff --git a/poetry.lock b/poetry.lock
index b758a2b..30e59b7 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -62,6 +62,7 @@ wrapt = [
 [package.source]
 type = "url"
 url = "https://gitlab.com/square-wheel-team/envsqare/-/archive/prerelease-0.0.4/envsqare-prerelease-0.0.4.tar.gz"
+
 [[package]]
 name = "filelock"
 version = "3.13.1"
@@ -234,6 +235,17 @@ platformdirs = ">=3.9.1,<5"
 docs = ["furo (>=2023.7.26)", "proselint (>=0.13)", "sphinx (>=7.1.2)", "sphinx-argparse (>=0.4)", "sphinxcontrib-towncrier (>=0.2.1a0)", "towncrier (>=23.6)"]
 test = ["covdefaults (>=2.3)", "coverage (>=7.2.7)", "coverage-enable-subprocess (>=1)", "flaky (>=3.7)", "packaging (>=23.1)", "pytest (>=7.4)", "pytest-env (>=0.8.2)", "pytest-freezer (>=0.4.8)", "pytest-mock (>=3.11.1)", "pytest-randomly (>=3.12)", "pytest-timeout (>=2.1)", "setuptools (>=68)", "time-machine (>=2.10)"]
 
+[[package]]
+name = "whitenoise"
+version = "6.6.0"
+description = "Radically simplified static file serving for WSGI applications"
+category = "main"
+optional = false
+python-versions = ">=3.8"
+
+[package.extras]
+brotli = ["Brotli"]
+
 [[package]]
 name = "wrapt"
 version = "1.16.0"
@@ -245,7 +257,7 @@ python-versions = ">=3.6"
 [metadata]
 lock-version = "1.1"
 python-versions = "^3.10"
-content-hash = "0ec68b8551d12a06ac65673e6d6740163e706df3488acce30955a8481dbc2b44"
+content-hash = "7f6f1a9bb4de654aa66f51aeb64421c7658a4d26c9feb17167264a32879314be"
 
 [metadata.files]
 asgiref = [
@@ -429,6 +441,10 @@ virtualenv = [
     {file = "virtualenv-20.25.0-py3-none-any.whl", hash = "sha256:4238949c5ffe6876362d9c0180fc6c3a824a7b12b80604eeb8085f2ed7460de3"},
     {file = "virtualenv-20.25.0.tar.gz", hash = "sha256:bf51c0d9c7dd63ea8e44086fa1e4fb1093a31e963b86959257378aef020e1f1b"},
 ]
+whitenoise = [
+    {file = "whitenoise-6.6.0-py3-none-any.whl", hash = "sha256:b1f9db9bf67dc183484d760b99f4080185633136a273a03f6436034a41064146"},
+    {file = "whitenoise-6.6.0.tar.gz", hash = "sha256:8998f7370973447fac1e8ef6e8ded2c5209a7b1f67c1012866dbcd09681c3251"},
+]
 wrapt = [
     {file = "wrapt-1.16.0-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:ffa565331890b90056c01db69c0fe634a776f8019c143a5ae265f9c6bc4bd6d4"},
     {file = "wrapt-1.16.0-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:e4fdb9275308292e880dcbeb12546df7f3e0f96c6b41197e0cf37d2826359020"},
diff --git a/pyproject.toml b/pyproject.toml
index 1eac036..7ef914d 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -14,6 +14,7 @@ pytz = "^2024.1"
 envsqare = {url = "https://gitlab.com/square-wheel-team/envsqare/-/archive/prerelease-0.0.4/envsqare-prerelease-0.0.4.tar.gz"}
 python-dateutil = "^2.8.2"
 pre-commit = "^3.6.0"
+whitenoise = "^6.6.0"
 
 
 [build-system]