diff --git a/content-scripts/index.js b/content-scripts/index.js
index a5d1dd0..d701920 100644
--- a/content-scripts/index.js
+++ b/content-scripts/index.js
@@ -50,9 +50,9 @@ const functionsToExecute = [
     { name: "courseUnitPage", func: courseUnitPage },
     { name: "injectOverrideFunctions", func: injectOverrideFunctions },
     { name: "addStarIconToCard", func: addStarIconToCard },
+    { name: "componentsPage", func: createComponentsPage },
 ];
 
-
 const init = async () => {
     // Inject user preferences
     const data = await getStorage(userPreferences);
diff --git a/content-scripts/pages/components_page.tsx b/content-scripts/pages/components_page.tsx
index c94db19..c79edd4 100644
--- a/content-scripts/pages/components_page.tsx
+++ b/content-scripts/pages/components_page.tsx
@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import jsx from "texsaur";
 import Button from "../components/Button";
 import { Table } from "../components/Table";
@@ -6,51 +7,74 @@ import Icon from "../components/Icon";
 const components = ["Icon", "Button", "Table"];
 
 export function createComponentsPage() {
-  if (!document.location.href.toLowerCase().includes("components")) {
-    return;
-  }
-  document.body.innerHTML = "";
-  document.title = "Components";
+    if (!document.location.href.toLowerCase().includes("components")) {
+        return;
+    }
+    document.body.innerHTML = "";
+    document.title = "Components";
 
-  const sidebarItems = components.map((component) => (
-    <a href={`#${component}`} key={component}>
-      <li className="se-sidebar-item">
-        {component}
-      </li>
-    </a>
-  ));
+    const sidebarItems = components.map((component) => (
+        <a href={`#${component}`} key={component}>
+            <li className="se-sidebar-item">{component}</li>
+        </a>
+    ));
 
-  const page = (
-    <div className="se-docs-container">
-      {/* Sidebar */}
-      <div className="se-sidebar">
-        <img src={chrome.runtime.getURL("images/logo/extended.png")} alt="NitSig Logo" width="100" />
-        <ul>{sidebarItems}</ul>
-      </div>
+    const page = (
+        <div className="se-docs-container">
+            {/* Sidebar */}
+            <div className="se-sidebar">
+                <img
+                    src={chrome.runtime.getURL("images/logo/extended.png")}
+                    alt="NitSig Logo"
+                    width="100"
+                />
+                <ul>{sidebarItems}</ul>
+            </div>
 
-      {/* Main Content */}
-      <div className="se-main-content">
-        <h1>NitSig Components</h1>
-        <div className="introduction">
-          <p>These components were created by the NitSig team in order to use them across the Sigarra pages.</p>
-          <p>If you find something in your Sigarra that would be interesting to change by one of the following components, send an email to <a href="mailto:ni@aefeup.pt">ni@aefeup.pt</a>.</p>
-          <p>Interesting to see the extension code base? Check our open source <a href="https://github.com/NIAEFEUP/nitsig" target="_blank" rel="noopener noreferrer">GitHub Repository</a>!</p>
-        </div>
+            {/* Main Content */}
+            <div className="se-main-content">
+                <h1>NitSig Components</h1>
+                <div className="introduction">
+                    <p>
+                        These components were created by the NitSig team in
+                        order to use them across the Sigarra pages.
+                    </p>
+                    <p>
+                        If you find something in your Sigarra that would be
+                        interesting to change by one of the following
+                        components, send an email to{" "}
+                        <a href="mailto:ni@aefeup.pt">ni@aefeup.pt</a>.
+                    </p>
+                    <p>
+                        Interesting to see the extension code base? Check our
+                        open source{" "}
+                        <a
+                            href="https://github.com/NIAEFEUP/nitsig"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            GitHub Repository
+                        </a>
+                        !
+                    </p>
+                </div>
 
-        {/* Icon */}
-        <Component name="Icon"
-          description="Talking about icons, we exclusive use the Remix Icon library, the outlined style! Check remixicon.com for all the available icons."
-          code={`
+                {/* Icon */}
+                <Component
+                    name="Icon"
+                    description="Talking about icons, we exclusive use the Remix Icon library, the outlined style! Check remixicon.com for all the available icons."
+                    code={`
 <Icon name="ri-notification-line" />
             `}
-        >
-          <Icon name="ri-notification-line" />
-        </Component>
+                >
+                    <Icon name="ri-notification-line" />
+                </Component>
 
-        {/* Button */}
-        <Component name="Button"
-          description="Our button abstraction that can be used to create buttons with icons and text."
-          code={`
+                {/* Button */}
+                <Component
+                    name="Button"
+                    description="Our button abstraction that can be used to create buttons with icons and text."
+                    code={`
 <Button
   name="my_button"
   text="Click me"
@@ -58,16 +82,19 @@ export function createComponentsPage() {
   onclick={() => alert("Button was clicked")}
 />
             `}
+                >
+                    <Button
+                        title="my_button"
+                        icon="ri-notification-line"
+                        onclick={() => alert("Button was clicked")}
+                    />
+                </Component>
 
-        >
-          <Button title="my_button" icon="ri-notification-line" onclick={() => alert("Button was clicked")} />
-        </Component>
-
-
-        {/* Table */}
-        <Component name="Table"
-          description="A simple table design with sorting capabilities on column headers."
-          code={`
+                {/* Table */}
+                <Component
+                    name="Table"
+                    description="A simple table design with sorting capabilities on column headers."
+                    code={`
 <Table
   name="my_table"
   headers={[
@@ -81,42 +108,45 @@ export function createComponentsPage() {
   ]}
 />
             `}
-        >
-          <Table
-            name="my_table"
-            headers={[
-              ["Component", "Component"],
-              ["Description", "Description"],
-              ["Status", "Status"]
-            ]}
-            data={[
-              ["Button", "A button that can be clicked", "In progress"],
-              ["Input", "A text input field", "Complete"]
-            ]}
-          />
-        </Component>
-      </div>
-    </div>
-  );
+                >
+                    <Table
+                        name="my_table"
+                        headers={[
+                            ["Component", "Component"],
+                            ["Description", "Description"],
+                            ["Status", "Status"],
+                        ]}
+                        data={[
+                            [
+                                "Button",
+                                "A button that can be clicked",
+                                "In progress",
+                            ],
+                            ["Input", "A text input field", "Complete"],
+                        ]}
+                    />
+                </Component>
+            </div>
+        </div>
+    );
 
-  document.body.appendChild(page);
+    document.body.appendChild(page);
 }
 
 interface ComponentProps {
-  name: string;
-  description: string;
-  code: string;
+    name: string;
+    description: string;
+    code: string;
 }
 
-const Component: JSX.Component<ComponentProps> = ({ name, description, code }, children) => (
-  <div id={name} className="se-component-section" >
-    <h2>{name}</h2>
-    <p>{description}</p>
-    <div className="se-component-show">
-      {children}
+const Component: JSX.Component<ComponentProps> = (
+    { name, description, code },
+    children,
+) => (
+    <div id={name} className="se-component-section">
+        <h2>{name}</h2>
+        <p>{description}</p>
+        <div className="se-component-show">{children}</div>
+        <pre className="se-code-block">{code}</pre>
     </div>
-    <pre className="se-code-block">
-      {code}
-    </pre>
-  </div>
-);
\ No newline at end of file
+);
diff --git a/css/componentsPage.css b/css/componentsPage.css
index 9ec6ca6..bd0d76b 100644
--- a/css/componentsPage.css
+++ b/css/componentsPage.css
@@ -1,4 +1,4 @@
-body{
+body {
     margin: 0;
 }
 
@@ -6,83 +6,82 @@ body{
     display: flex;
     height: 100vh;
     width: 100vw;
-  
+
     .se-sidebar {
-      position: fixed;
-      width: 200px;
-      padding: 20px;
-      border-right: 1px solid #ccc;
-      overflow-y: auto;
-      height: 100%;
-  
-      ul {
-        list-style-type: none;
-        padding: 0;
+        position: fixed;
+        width: 200px;
+        padding: 20px;
+        border-right: 1px solid #ccc;
+        overflow-y: auto;
+        height: 100%;
 
-        a{
-            text-decoration: none;
-        }
-  
-        .se-sidebar-item {
-          padding: 10px;
-          cursor: pointer;
-          transition: background-color 0.3s;
-          border-radius: 5px;
-  
-          &:hover {
-            background-color: #e6e6e6;
-          }
+        ul {
+            list-style-type: none;
+            padding: 0;
+
+            a {
+                text-decoration: none;
+            }
+
+            .se-sidebar-item {
+                padding: 10px;
+                cursor: pointer;
+                transition: background-color 0.3s;
+                border-radius: 5px;
+
+                &:hover {
+                    background-color: #e6e6e6;
+                }
+            }
         }
-      }
     }
-  
-    .se-main-content {
-      margin-left: 240px;
-      width: 100%;
-      overflow-y: auto;
-      padding-left: 3em;
-      padding-right: 3em;
 
-      h1 {
-        font-size: 32px;
-        color: #333;
-        border: none;
-      }
+    .se-main-content {
+        margin-left: 240px;
+        width: 100%;
+        overflow-y: auto;
+        padding-left: 3em;
+        padding-right: 3em;
 
-      .introduction{
-        margin-top: 10px;
-        margin-bottom: 50px;
-        p{
-            margin: 7px;
+        h1 {
+            font-size: 32px;
+            color: #333;
+            border: none;
         }
-      }
 
-      .se-component-show{
-        padding: 20px 0 20px 0;
-      }
-  
-      .se-component-section {
-        margin-bottom: 40px;
-  
-        h2 {
-          font-size: 24px;
-          color: #333;
-          border: none;
+        .introduction {
+            margin-top: 10px;
+            margin-bottom: 50px;
+            p {
+                margin: 7px;
+            }
         }
-  
-        p {
-          font-size: 16px;
-          color: #666;
+
+        .se-component-show {
+            padding: 20px 0 20px 0;
         }
-  
-        .se-code-block {
-          background-color: #f5f5f5;
-          padding: 10px;
-          border-radius: 5px;
-          font-family: monospace;
-          color: #333;
+
+        .se-component-section {
+            margin-bottom: 40px;
+
+            h2 {
+                font-size: 24px;
+                color: #333;
+                border: none;
+            }
+
+            p {
+                font-size: 16px;
+                color: #666;
+            }
+
+            .se-code-block {
+                background-color: #f5f5f5;
+                padding: 10px;
+                border-radius: 5px;
+                font-family: monospace;
+                color: #333;
+            }
         }
-      }
     }
-  }
-  
\ No newline at end of file
+}
diff --git a/manifest.js b/manifest.js
index 5387c91..bfa275e 100644
--- a/manifest.js
+++ b/manifest.js
@@ -38,6 +38,10 @@ let manifest = {
             matches: ["*://sigarra.up.pt/*/web_page.inicial"],
             css: ["css/homepage.css"],
         },
+        {
+            matches: ["*://sigarra.up.pt/*/components"],
+            css: ["css/componentsPage.css"],
+        },
     ],
     web_accessible_resources: [
         {
@@ -50,6 +54,7 @@ let manifest = {
                 "images/publicationWebsiteLogo/*",
                 "images/FEUP.svg",
                 "images/feup-map.svg",
+                "images/logo/*",
             ],
             matches: ["https://sigarra.up.pt/*"],
         },