diff --git a/.gitignore b/.gitignore
index 91d15fa..f3d35c3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 app/config.yaml
 *__pycache__*
 app/static/cache/*
-.env
\ No newline at end of file
+.env
+app/cypress/screenshots/*
\ No newline at end of file
diff --git a/Makefile b/Makefile
index 0908cda..cc61073 100644
--- a/Makefile
+++ b/Makefile
@@ -75,8 +75,8 @@ browse:
 	# Open the application in the browser at http://localhost:$(PORT)
 	chromium http://localhost:$(PORT)
 
-# Cypress tests\ nCYPRESS_DIR := app
-.PHONY: test
-test: down prod
-	# Run end-to-end tests with Cypress.
+npm-install:
+	cd app && npm install
+
+test: npm-install
 	cd app && npx cypress run --spec "cypress/e2e/**/*.spec.js"
diff --git a/app/cypress/e2e/navbar_logo_visibility.spec.js b/app/cypress/e2e/navbar_logo_visibility.spec.js
new file mode 100644
index 0000000..9e70bc4
--- /dev/null
+++ b/app/cypress/e2e/navbar_logo_visibility.spec.js
@@ -0,0 +1,32 @@
+describe('Navbar Logo Visibility', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('should have #navbar_logo present in the DOM', () => {
+    cy.get('#navbar_logo').should('exist');
+  });
+
+  it('should be invisible (opacity 0) by default', () => {
+    cy.get('#navbar_logo')
+      .should('exist')
+      .and('have.css', 'opacity', '0');
+  });
+
+  it('should become visible (opacity 1) after entering fullscreen', () => {
+    cy.window().then(win => {
+      win.fullscreen();
+    });
+    cy.get('#navbar_logo', { timeout: 4000 })
+      .should('have.css', 'opacity', '1');
+  });
+
+  it('should become invisible again (opacity 0) after exiting fullscreen', () => {
+    cy.window().then(win => {
+      win.fullscreen();
+      win.exitFullscreen();
+    });
+    cy.get('#navbar_logo', { timeout: 4000 })
+      .should('have.css', 'opacity', '0');
+  });
+});