diff --git a/.gitignore b/.gitignore
index 0afa3a3..eef19c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,7 +7,7 @@
 
 # testing
 /coverage
-/__tests__/__snapshots__
+./__tests__/__snapshots__
 
 # next.js
 /.next/
diff --git a/__tests__/components/Footer.test.tsx b/__tests__/components/Footer.test.tsx
new file mode 100644
index 0000000..a920cc8
--- /dev/null
+++ b/__tests__/components/Footer.test.tsx
@@ -0,0 +1,19 @@
+import { Footer } from '@/components/Footer/Footer';
+import { render } from '@testing-library/react';
+
+describe('Footer', () => {
+    it('should render', () => {
+        const { container } = render(<Footer />);
+        expect(container).toHaveTextContent('The contents of this website are deployed from this open sourced repo');
+    });
+
+    it('should have a link to the repo', () => {
+        const { container } = render(<Footer />);
+        expect(container.querySelector('a')).toHaveAttribute('href', '#');
+    });
+
+    it('should have a link to the repo', () => {
+        const { container } = render(<Footer />);
+        expect(container.querySelector('a')).toHaveAttribute('target', '_blank');
+    });
+});
diff --git a/__tests__/components/Navbar.test.tsx b/__tests__/components/Navbar.test.tsx
new file mode 100644
index 0000000..5c24100
--- /dev/null
+++ b/__tests__/components/Navbar.test.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Navbar } from '@/components/Navbar/Navbar';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+describe('Navbar', () => {
+    it('should render', () => {
+        const { container } = render(<Navbar />);
+        expect(container).toHaveTextContent('URL Shortener');
+        expect(container.querySelector('a')).toHaveAttribute('href', '#');
+    });
+
+    it('should have dropdown menu', () => {
+        const { container } = render(<Navbar />);
+        expect(container.querySelector('ul')).toHaveTextContent('Profile');
+        expect(container.querySelector('ul')).toHaveTextContent('Dashboard');
+        expect(container.querySelector('ul')).toHaveTextContent('Settings');
+    });
+
+    it('should toggle menu', () => {
+        const { container } = render(<Navbar />);
+        const button = container.querySelector('button');
+        expect(button).toHaveTextContent('Sunny');
+        button?.click();
+        expect(container.querySelector('ul')).toHaveClass('lg:flex space-x-4');
+    });
+});
diff --git a/__tests__/components/ProfileIcon.test.tsx b/__tests__/components/ProfileIcon.test.tsx
new file mode 100644
index 0000000..fe2ba6e
--- /dev/null
+++ b/__tests__/components/ProfileIcon.test.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ProfileIcon from '@/components/ProfileIcon/ProfileIcon';
+
+describe('ProfileIcon', () => {
+    it('should render', () => {
+        const { container } = render(<ProfileIcon firstName="Sunny" lastName="Sahsi" size={50} />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it('should have the correct initials', () => {
+        const { container } = render(<ProfileIcon firstName="Sunny" lastName="Sahsi" size={50} />);
+        expect(container).toHaveTextContent('SS');
+    });
+});
diff --git a/src/components/ProfileIcon/ProfileIcon.tsx b/src/components/ProfileIcon/ProfileIcon.tsx
index c0208fb..e06f9b4 100644
--- a/src/components/ProfileIcon/ProfileIcon.tsx
+++ b/src/components/ProfileIcon/ProfileIcon.tsx
@@ -1,4 +1,3 @@
-// components/ProfileIcon.tsx
 import React from 'react';
 
 interface ProfileIconProps {