diff --git a/.eslintrc.json b/.eslintrc.json
index 3f1cfa8..9c11497 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,8 +1,8 @@
 {
-    // ...
-    "extends": [
-      "next/core-web-vitals",
-      "prettier" // Add "prettier" last. This will turn off eslint rules conflicting with prettier. This is not what will format our code.
-    ]
-    // ...
-  }
\ No newline at end of file
+  // ...
+  "extends": [
+    "next/core-web-vitals",
+    "prettier" // Add "prettier" last. This will turn off eslint rules conflicting with prettier. This is not what will format our code.
+  ]
+  // ...
+}
diff --git a/.github/workflows/actions.yml b/.github/workflows/actions.yml
new file mode 100644
index 0000000..f47ed64
--- /dev/null
+++ b/.github/workflows/actions.yml
@@ -0,0 +1,60 @@
+name: Workflow
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  build-project: #First Job is to check the code formatting, linting and build the project.
+    if: github.event.pull_request.draft == false
+    name: Run Prettier, Lint and Build Checks
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Install Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Code Formatting Check #Runs Prettier Script
+        run: npm run prettier
+
+      - name: Linting Check #Runs ESLint Script
+        run: npm run lint
+
+      - name: Build #Build the project
+        run: npm run build
+
+      - name: Check Build Status
+        run: |
+          if [ $? -eq 0 ]; then
+            echo "Build successful!🎉"
+          else
+            echo "Build failed!"
+            exit 1
+          fi
+
+  chromatic-deployment: #Second Job is to deploy the project to Chromatic
+    if: github.event.pull_request.draft == false
+    name: Deploy Storybook to Chromatic
+    runs-on: ubuntu-latest # Operating System
+    # Job steps
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # 👈 Required to retrieve git history
+      - name: Install dependencies
+        run: npm install
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
diff --git a/.prettierrc.json b/.prettierrc.json
index f6e6b22..043b0cd 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,7 +1,7 @@
 {
-    "semi": false,
-    "trailingComma": "es5",
-    "singleQuote": true,
-    "tabWidth": 2,
-    "useTabs": false
-}
\ No newline at end of file
+  "semi": false,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
+}
diff --git a/.storybook/main.js b/.storybook/main.js
index b2f24ca..43111ad 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,19 +1,19 @@
 /** @type { import('@storybook/nextjs').StorybookConfig } */
 const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   staticDirs: ['../public'],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
   ],
   framework: {
-    name: "@storybook/nextjs",
+    name: '@storybook/nextjs',
     options: {},
   },
   docs: {
-    autodocs: "tag",
+    autodocs: 'tag',
   },
-};
-export default config;
+}
+export default config
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 8602700..2d36066 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,8 +1,8 @@
 /** @type { import('@storybook/react').Preview } */
-import '../src/app/globals.css';
+import '../src/app/globals.css'
 const preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -10,6 +10,6 @@ const preview = {
       },
     },
   },
-};
+}
 
-export default preview;
+export default preview
diff --git a/.vscode/settings.json b/.vscode/settings.json
index dcde718..c91ad1b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,8 +1,8 @@
 {
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
-    },
-    // Add those two lines:
-    "editor.formatOnSave": true, // Tell VSCode to format files on save
-    "editor.defaultFormatter": "esbenp.prettier-vscode" // Tell VSCode to use Prettier as default file formatter
-}
\ No newline at end of file
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  // Add those two lines:
+  "editor.formatOnSave": true, // Tell VSCode to format files on save
+  "editor.defaultFormatter": "esbenp.prettier-vscode" // Tell VSCode to use Prettier as default file formatter
+}
diff --git a/package.json b/package.json
index 74b8d69..568373b 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "lint": "next lint",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=chpt_1a0522d85a68f99"
+    "prettier": "npx prettier . --check",
+    "chromatic": "chromatic --exit-zero-on-changes"
   },
   "dependencies": {
     "autoprefixer": "10.4.16",
diff --git a/src/app/page.js b/src/app/page.js
index fdae683..d7ec537 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -1,7 +1,7 @@
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-center p-24">
-        <h1 className="text-5xl font-bold z-20">BacPac</h1>
+      <h1 className="text-5xl font-bold z-20">BacPac</h1>
     </main>
   )
 }
diff --git a/src/stories/Button.jsx b/src/stories/Button.jsx
index 7c613bb..876f523 100644
--- a/src/stories/Button.jsx
+++ b/src/stories/Button.jsx
@@ -1,16 +1,20 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './button.css';
+import React from 'react'
+import PropTypes from 'prop-types'
+import './button.css'
 
 /**
  * Primary UI component for user interaction
  */
 export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  const mode = primary
+    ? 'storybook-button--primary'
+    : 'storybook-button--secondary'
   return (
     <button
       type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      className={['storybook-button', `storybook-button--${size}`, mode].join(
+        ' '
+      )}
       {...props}
     >
       {label}
@@ -20,8 +24,8 @@ export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
         }
       `}</style>
     </button>
-  );
-};
+  )
+}
 
 Button.propTypes = {
   /**
@@ -44,11 +48,11 @@ Button.propTypes = {
    * Optional click handler
    */
   onClick: PropTypes.func,
-};
+}
 
 Button.defaultProps = {
   backgroundColor: null,
   primary: false,
   size: 'medium',
   onClick: undefined,
-};
+}
diff --git a/src/stories/Button.stories.js b/src/stories/Button.stories.js
index e8d8096..f7e9aac 100644
--- a/src/stories/Button.stories.js
+++ b/src/stories/Button.stories.js
@@ -1,4 +1,4 @@
-import { Button } from './Button';
+import { Button } from './Button'
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const ButtonStories = {
@@ -14,9 +14,9 @@ const ButtonStories = {
   argTypes: {
     backgroundColor: { control: 'color' },
   },
-};
+}
 
-export default ButtonStories;
+export default ButtonStories
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Primary = {
@@ -24,33 +24,32 @@ export const Primary = {
     primary: true,
     label: 'Button',
   },
-};
+}
 
 export const Secondary = {
   args: {
     label: 'Button',
   },
-};
+}
 
 export const Large = {
   args: {
     size: 'large',
     label: 'Button',
   },
-};
+}
 
 export const Small = {
   args: {
     size: 'small',
     label: 'Button',
   },
-};
-
+}
 
 export const Warning = {
   args: {
     primary: true,
     label: 'Delete now',
     backgroundColor: 'red',
-  }
-};
+  },
+}
diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx
index e05f151..b762df6 100644
--- a/src/stories/Configure.mdx
+++ b/src/stories/Configure.mdx
@@ -1,36 +1,38 @@
-import { Meta } from "@storybook/blocks";
-import Image from "next/image";
-
-import Github from "./assets/github.svg";
-import Discord from "./assets/discord.svg";
-import Youtube from "./assets/youtube.svg";
-import Tutorials from "./assets/tutorials.svg";
-import Styling from "./assets/styling.png";
-import Context from "./assets/context.png";
-import Assets from "./assets/assets.png";
-import Docs from "./assets/docs.png";
-import Share from "./assets/share.png";
-import FigmaPlugin from "./assets/figma-plugin.png";
-import Testing from "./assets/testing.png";
-import Accessibility from "./assets/accessibility.png";
-import Theming from "./assets/theming.png";
-import AddonLibrary from "./assets/addon-library.png";
-
-export const RightArrow = () => <svg 
-    viewBox="0 0 14 14" 
-    width="8px" 
-    height="14px" 
-    style={{ 
+import { Meta } from '@storybook/blocks'
+import Image from 'next/image'
+
+import Github from './assets/github.svg'
+import Discord from './assets/discord.svg'
+import Youtube from './assets/youtube.svg'
+import Tutorials from './assets/tutorials.svg'
+import Styling from './assets/styling.png'
+import Context from './assets/context.png'
+import Assets from './assets/assets.png'
+import Docs from './assets/docs.png'
+import Share from './assets/share.png'
+import FigmaPlugin from './assets/figma-plugin.png'
+import Testing from './assets/testing.png'
+import Accessibility from './assets/accessibility.png'
+import Theming from './assets/theming.png'
+import AddonLibrary from './assets/addon-library.png'
+
+export const RightArrow = () => (
+  <svg
+    viewBox="0 0 14 14"
+    width="8px"
+    height="14px"
+    style={{
       marginLeft: '4px',
       display: 'inline-block',
       shapeRendering: 'inherit',
       verticalAlign: 'middle',
       fill: 'currentColor',
-      'path fill': 'currentColor'
+      'path fill': 'currentColor',
     }}
->
-  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
-</svg>
+  >
+    <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+  </svg>
+)
 
 <Meta title="Configure your project" />
 
@@ -39,6 +41,7 @@ export const RightArrow = () => <svg
     # Configure your project
 
     Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
   </div>
   <div className="sb-section">
     <div className="sb-section-item">
@@ -97,6 +100,7 @@ export const RightArrow = () => <svg
     # Do more with Storybook
 
     Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
   </div>
 
   <div className="sb-section">
@@ -234,12 +238,12 @@ export const RightArrow = () => <svg
       >Star on GitHub<RightArrow /></a>
     </div>
     <div className="sb-section-item">
-      <Image 
+      <Image
         width={33}
         height={32}
         layout="fixed"
-        src={Discord} 
-        alt="Discord logo" 
+        src={Discord}
+        alt="Discord logo"
         className="sb-explore-image"
       />
       <div>
@@ -252,12 +256,12 @@ export const RightArrow = () => <svg
       </div>
     </div>
     <div className="sb-section-item">
-      <Image 
+      <Image
         width={32}
         height={32}
         layout="fixed"
-        src={Youtube} 
-        alt="Youtube logo" 
+        src={Youtube}
+        alt="Youtube logo"
         className="sb-explore-image"
       />
       <div>
@@ -270,12 +274,12 @@ export const RightArrow = () => <svg
       </div>
     </div>
     <div className="sb-section-item">
-      <Image 
+      <Image
         width={33}
         height={32}
         layout="fixed"
-        src={Tutorials} 
-        alt="A book" 
+        src={Tutorials}
+        alt="A book"
         className="sb-explore-image"
       />
       <p>Follow guided walkthroughs on for key workflows.</p>
@@ -285,6 +289,7 @@ export const RightArrow = () => <svg
           target="_blank"
         >Discover tutorials<RightArrow /></a>
     </div>
+
 </div>
 
 <style>
diff --git a/src/stories/Header.jsx b/src/stories/Header.jsx
index 39e5226..a83c971 100644
--- a/src/stories/Header.jsx
+++ b/src/stories/Header.jsx
@@ -1,14 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from 'react'
+import PropTypes from 'prop-types'
 
-import { Button } from './Button';
-import './header.css';
+import { Button } from './Button'
+import './header.css'
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
   <header>
     <div className="storybook-header">
       <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <g fill="none" fillRule="evenodd">
             <path
               d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
@@ -37,13 +42,18 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
         ) : (
           <>
             <Button size="small" onClick={onLogin} label="Log in" />
-            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+            <Button
+              primary
+              size="small"
+              onClick={onCreateAccount}
+              label="Sign up"
+            />
           </>
         )}
       </div>
     </div>
   </header>
-);
+)
 
 Header.propTypes = {
   user: PropTypes.shape({
@@ -52,8 +62,8 @@ Header.propTypes = {
   onLogin: PropTypes.func.isRequired,
   onLogout: PropTypes.func.isRequired,
   onCreateAccount: PropTypes.func.isRequired,
-};
+}
 
 Header.defaultProps = {
   user: null,
-};
+}
diff --git a/src/stories/Header.stories.js b/src/stories/Header.stories.js
index 6e864fb..744749e 100644
--- a/src/stories/Header.stories.js
+++ b/src/stories/Header.stories.js
@@ -1,4 +1,4 @@
-import { Header } from './Header';
+import { Header } from './Header'
 
 const headerStory = {
   title: 'Example/Header',
@@ -9,17 +9,17 @@ const headerStory = {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',
   },
-};
+}
 
-export default headerStory;
+export default headerStory
 export const LoggedIn = {
   args: {
     user: {
       name: 'Jane Doe',
     },
   },
-};
+}
 
 export const LoggedOut = {
   args: {},
-};
+}
diff --git a/src/stories/Page.jsx b/src/stories/Page.jsx
index 39cf15c..18dfd53 100644
--- a/src/stories/Page.jsx
+++ b/src/stories/Page.jsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React from 'react'
 
-import { Header } from './Header';
-import './page.css';
+import { Header } from './Header'
+import './page.css'
 
 export const Page = () => {
-  const [user, setUser] = React.useState();
+  const [user, setUser] = React.useState()
 
   return (
     <article>
@@ -18,40 +18,58 @@ export const Page = () => {
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
-          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+          <a
+            href="https://componentdriven.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             <strong>component-driven</strong>
           </a>{' '}
           process starting with atomic components and ending with pages.
         </p>
         <p>
-          Render pages with mock data. This makes it easy to build and review page states without
-          needing to navigate to them in your app. Here are some handy patterns for managing page
-          data in Storybook:
+          Render pages with mock data. This makes it easy to build and review
+          page states without needing to navigate to them in your app. Here are
+          some handy patterns for managing page data in Storybook:
         </p>
         <ul>
           <li>
-            Use a higher-level connected component. Storybook helps you compose such data from the
-            &quot;args&quot; of child component stories
+            Use a higher-level connected component. Storybook helps you compose
+            such data from the &quot;args&quot; of child component stories
           </li>
           <li>
-            Assemble data in the page component from your services. You can mock these services out
-            using Storybook.
+            Assemble data in the page component from your services. You can mock
+            these services out using Storybook.
           </li>
         </ul>
         <p>
           Get a guided tutorial on component-driven development at{' '}
-          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+          <a
+            href="https://storybook.js.org/tutorials/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             Storybook tutorials
           </a>
           . Read more in the{' '}
-          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+          <a
+            href="https://storybook.js.org/docs"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             docs
           </a>
           .
         </p>
         <div className="tip-wrapper">
-          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
-          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+          <span className="tip">Tip</span> Adjust the width of the canvas with
+          the{' '}
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 12 12"
+            xmlns="http://www.w3.org/2000/svg"
+          >
             <g fill="none" fillRule="evenodd">
               <path
                 d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
@@ -64,5 +82,5 @@ export const Page = () => {
         </div>
       </section>
     </article>
-  );
-};
+  )
+}
diff --git a/src/stories/Page.stories.js b/src/stories/Page.stories.js
index bc65c9a..28f2161 100644
--- a/src/stories/Page.stories.js
+++ b/src/stories/Page.stories.js
@@ -1,5 +1,5 @@
-import { within, userEvent } from '@storybook/testing-library';
-import { Page } from './Page';
+import { within, userEvent } from '@storybook/testing-library'
+import { Page } from './Page'
 
 const pageStories = {
   title: 'Example/Page',
@@ -8,19 +8,19 @@ const pageStories = {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',
   },
-};
+}
 
-export default pageStories;
+export default pageStories
 
-export const LoggedOut = {};
+export const LoggedOut = {}
 
 // More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+    const canvas = within(canvasElement)
     const loginButton = await canvas.getByRole('button', {
       name: /Log in/i,
-    });
-    await userEvent.click(loginButton);
+    })
+    await userEvent.click(loginButton)
   },
-};
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 6c29352..d8a514d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,7 +4,7 @@ module.exports = {
     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-    "./src/stories/**/*.{js,ts,jsx,tsx,mdx}",
+    './src/stories/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {