diff --git a/server.js b/server.js
index ac728069..e88f9cef 100644
--- a/server.js
+++ b/server.js
@@ -125,7 +125,7 @@ app
 
     // organizations start
     server.get('/organizations', (req, res) => {
-      app.render(req, res, '/organizations/organizations');
+      app.render(req, res, '/organizations');
     });
 
     server.get('/organizations/:organizationSlug', (req, res) => {
diff --git a/src/components/Backups/BackupsSkeleton.tsx b/src/components/Backups/BackupsSkeleton.tsx
index f9e9085c..0f183a9a 100644
--- a/src/components/Backups/BackupsSkeleton.tsx
+++ b/src/components/Backups/BackupsSkeleton.tsx
@@ -6,8 +6,8 @@ import { BackupsHeader, DataTable } from './StyledBackups';
 const Backups = () => {
   const numberOfBackupFields = typeof window !== 'undefined' ? Math.floor((window.innerHeight * 8) / 10 / 65) : 10;
 
-  const backupFieldSkeleton = (
-    <div className="data-row">
+  const backupFieldSkeleton = (idx: number) => (
+    <div className="data-row" key={idx}>
       <div className="source">
         <Skeleton />
       </div>
@@ -32,7 +32,7 @@ const Backups = () => {
         <label className="backupid">Backup id</label>
       </BackupsHeader>
 
-      <DataTable>{[...Array<undefined>(numberOfBackupFields)].map(() => backupFieldSkeleton)}</DataTable>
+      <DataTable>{[...Array<undefined>(numberOfBackupFields)].map((_, idx) => backupFieldSkeleton(idx))}</DataTable>
     </div>
   );
 };
diff --git a/src/components/Box/StyledBox.tsx b/src/components/Box/StyledBox.tsx
index 8851f2b8..cea9cbbb 100644
--- a/src/components/Box/StyledBox.tsx
+++ b/src/components/Box/StyledBox.tsx
@@ -1,7 +1,7 @@
 import { color } from 'lib/variables';
 import styled, { css } from 'styled-components';
 
-export const StyledBox = styled.div<{ activeBgs?: string[] }>`
+export const StyledBox = styled.div<{ $activeBgs?: string[] }>`
   border: 2px solid ${props => props.theme.borders.box};
   box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
   transition: all 0.3s ease;
@@ -38,13 +38,13 @@ export const StyledBox = styled.div<{ activeBgs?: string[] }>`
     z-index: 10;
   }
   ${props =>
-    props.activeBgs &&
+    props.$activeBgs &&
     css`
       .content {
-        background-image: ${props.activeBgs[0]};
+        background-image: ${props.$activeBgs[0]};
 
         &:hover {
-          background-image: ${props.activeBgs[1]};
+          background-image: ${props.$activeBgs[1]};
         }
       }
     `}
diff --git a/src/components/Box/index.tsx b/src/components/Box/index.tsx
index c50d29c3..31b6a68c 100644
--- a/src/components/Box/index.tsx
+++ b/src/components/Box/index.tsx
@@ -12,7 +12,7 @@ interface BoxProps {
   activeBgs?: string[]; // if present, they act as hover backgrounds
 }
 const Box: FC<BoxProps> = ({ className = '', activeBgs, children }) => (
-  <StyledBox className={className} activeBgs={activeBgs}>
+  <StyledBox className={className} $activeBgs={activeBgs}>
     <div className="content">{children}</div>
   </StyledBox>
 );
diff --git a/src/components/BulkDeployments/BulkDeploymentsSkeleton.tsx b/src/components/BulkDeployments/BulkDeploymentsSkeleton.tsx
index b959d27d..b1273065 100644
--- a/src/components/BulkDeployments/BulkDeploymentsSkeleton.tsx
+++ b/src/components/BulkDeployments/BulkDeploymentsSkeleton.tsx
@@ -5,8 +5,8 @@ import { BulkDeploymentsDataTable, BulkDeploymentsHeader } from './StyledBulkDep
 
 const BulkDeploymentsSkeleton = () => {
   const numberOfItems = typeof window !== 'undefined' ? Math.floor((window.innerHeight * 8) / 10 / 65) : 10;
-  const rowItem = (
-    <div className="data-row">
+  const rowItem = (idx: number) => (
+    <div className="data-row" key={idx}>
       <div className="project">
         <Skeleton width={'100%'} />
       </div>
@@ -46,7 +46,9 @@ const BulkDeploymentsSkeleton = () => {
         <label className="duration">Duration</label>
         <label></label>
       </BulkDeploymentsHeader>
-      <BulkDeploymentsDataTable>{[...Array<undefined>(numberOfItems)].map(() => rowItem)}</BulkDeploymentsDataTable>
+      <BulkDeploymentsDataTable>
+        {[...Array<undefined>(numberOfItems)].map((_, idx) => rowItem(idx))}
+      </BulkDeploymentsDataTable>
     </div>
   );
 };
diff --git a/src/components/Deployments/DeploymentsSkeleton.tsx b/src/components/Deployments/DeploymentsSkeleton.tsx
index 0ca27f99..70b77a13 100644
--- a/src/components/Deployments/DeploymentsSkeleton.tsx
+++ b/src/components/Deployments/DeploymentsSkeleton.tsx
@@ -6,8 +6,8 @@ import { StyledDeployments } from './StyledDeployments';
 const DeploymentsSkeleton = () => {
   const numberOfDeploymentFields = typeof window !== 'undefined' ? Math.floor((window.innerHeight * 8) / 10 / 65) : 10;
 
-  const skeletonItem = (
-    <div className="deploymentRow">
+  const skeletonItem = (idx: number) => (
+    <div className="deploymentRow" key={idx}>
       <div className="data-row">
         <div className="name">
           <Skeleton />
@@ -36,7 +36,9 @@ const DeploymentsSkeleton = () => {
         <label>Status</label>
         <label>Duration</label>
       </div>
-      <div className="data-table">{[...Array<undefined>(numberOfDeploymentFields)].map(() => skeletonItem)}</div>
+      <div className="data-table">
+        {[...Array<undefined>(numberOfDeploymentFields)].map((_, idx) => skeletonItem(idx))}
+      </div>
     </StyledDeployments>
   );
 };
diff --git a/src/components/DeploymentsByFilter/DeploymentsByFilterSkeleton.tsx b/src/components/DeploymentsByFilter/DeploymentsByFilterSkeleton.tsx
index f35d3179..fcc81e78 100644
--- a/src/components/DeploymentsByFilter/DeploymentsByFilterSkeleton.tsx
+++ b/src/components/DeploymentsByFilter/DeploymentsByFilterSkeleton.tsx
@@ -4,8 +4,8 @@ import Skeleton from 'react-loading-skeleton';
 import { Deployments, DeploymentsDataTable, DeploymentsHeader } from './StyledDeploymentsByFilter';
 
 const DeploymentsByFilterSkeleton = () => {
-  const SkeletonRow = (
-    <div className="data-row row-heading skeleton">
+  const SkeletonRow = (idx: number) => (
+    <div className="data-row row-heading skeleton" key={idx}>
       <div className="project">
         <Skeleton />
       </div>
@@ -67,7 +67,9 @@ const DeploymentsByFilterSkeleton = () => {
           <label>Duration</label>
           <label></label>
         </DeploymentsHeader>
-        <DeploymentsDataTable>{[...Array<undefined>(numberOfItems)].map(() => SkeletonRow)}</DeploymentsDataTable>
+        <DeploymentsDataTable>
+          {[...Array<undefined>(numberOfItems)].map((_, idx) => SkeletonRow(idx))}
+        </DeploymentsDataTable>
       </>
     </Deployments>
   );
diff --git a/src/components/EnvironmentVariables/EnvironmentVariablesSkeleton.tsx b/src/components/EnvironmentVariables/EnvironmentVariablesSkeleton.tsx
index d3446623..aa3a5e60 100644
--- a/src/components/EnvironmentVariables/EnvironmentVariablesSkeleton.tsx
+++ b/src/components/EnvironmentVariables/EnvironmentVariablesSkeleton.tsx
@@ -7,8 +7,8 @@ import { StyledEnvironmentVariableDetails, StyledProjectVariableTable } from './
 const EnvironmentVariablesSkeleton = () => {
   const numberOfVariableFields = 3;
 
-  const skeletonItem = (
-    <div className="data-row">
+  const skeletonItem = (idx: number) => (
+    <div className="data-row" key={idx}>
       <div className="varName">
         <Skeleton width={'90%'} />
       </div>
@@ -18,8 +18,8 @@ const EnvironmentVariablesSkeleton = () => {
     </div>
   );
 
-  const projectSkeletonItem = (
-    <div className="data-row">
+  const projectSkeletonItem = (idx: number) => (
+    <div className="data-row" key={`project-${idx}`}>
       <div className="varName">
         <Skeleton width={'90%'} />
       </div>
@@ -47,7 +47,9 @@ const EnvironmentVariablesSkeleton = () => {
             <label>Scope</label>
           </div>
         </div>
-        <div className="data-table">{[...Array<undefined>(numberOfVariableFields)].map(() => skeletonItem)}</div>
+        <div className="data-table">
+          {[...Array<undefined>(numberOfVariableFields)].map((_, idx) => skeletonItem(idx))}
+        </div>
       </StyledProjectVariableTable>
       <hr style={{ margin: '30px 0' }} />
       <div className="header">
@@ -66,7 +68,9 @@ const EnvironmentVariablesSkeleton = () => {
             <label>Scope</label>
           </div>
         </div>
-        <div className="data-table">{[...Array<undefined>(numberOfVariableFields)].map(() => projectSkeletonItem)}</div>
+        <div className="data-table">
+          {[...Array<undefined>(numberOfVariableFields)].map((_, idx) => projectSkeletonItem(idx))}
+        </div>
       </StyledProjectVariableTable>
     </StyledEnvironmentVariableDetails>
   );
diff --git a/src/components/Header/StyledHeader.tsx b/src/components/Header/StyledHeader.tsx
index 14e1bf00..d649ad6f 100644
--- a/src/components/Header/StyledHeader.tsx
+++ b/src/components/Header/StyledHeader.tsx
@@ -1,11 +1,11 @@
 import { color } from 'lib/variables';
 import styled from 'styled-components';
 
-export const StyledHeader = styled.header<{ isOrganizationsPath: boolean }>`
+export const StyledHeader = styled.header<{ $isOrganizationsPath: boolean }>`
   background: ${color.brightBlue} ${color.lightBlue};
   background: ${color.lightBlue};
   background: ${props =>
-    props.isOrganizationsPath
+    props.$isOrganizationsPath
       ? props.theme.gradients.organizationsHeaderGradient
       : props.theme.gradients.headerFooterGradient};
 
@@ -42,7 +42,7 @@ export const StyledHeader = styled.header<{ isOrganizationsPath: boolean }>`
     }
     &.navitem {
       align-items: center;
-      border-left: 1px solid ${props => (props.isOrganizationsPath ? 'transparent' : color.blue)};
+      border-left: 1px solid ${props => (props.$isOrganizationsPath ? 'transparent' : color.blue)};
       cursor: pointer;
       display: flex;
       &::before {
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index df33144f..1ae09d5d 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -23,8 +23,8 @@ const Header = ({ logo }) => {
   const isOrganizationsPath = asPath.includes('/organizations');
 
   return (
-    <StyledHeader isOrganizationsPath={isOrganizationsPath}>
-      <Link href="/">
+    <StyledHeader $isOrganizationsPath={isOrganizationsPath}>
+      <Link href="/projects">
         <a className="home">
           <img
             alt="Home"
diff --git a/src/components/HeaderMenu/StyledHeaderMenu.tsx b/src/components/HeaderMenu/StyledHeaderMenu.tsx
index 3912f110..aeea254a 100644
--- a/src/components/HeaderMenu/StyledHeaderMenu.tsx
+++ b/src/components/HeaderMenu/StyledHeaderMenu.tsx
@@ -25,8 +25,8 @@ export const DropdownButton = styled.a`
   }
 `;
 
-export const StyledDropdown = styled.div<{ isOrganizationsPath: boolean }>`
-  border-left: 1px solid ${props => (props.isOrganizationsPath ? 'transparent' : color.blue)};
+export const StyledDropdown = styled.div<{ $isOrganizationsPath: boolean }>`
+  border-left: 1px solid ${props => (props.$isOrganizationsPath ? 'transparent' : color.blue)};
   cursor: pointer;
   padding: 10px 20px;
   hr {
diff --git a/src/components/HeaderMenu/index.js b/src/components/HeaderMenu/index.js
index 884b6ba1..7654fd65 100644
--- a/src/components/HeaderMenu/index.js
+++ b/src/components/HeaderMenu/index.js
@@ -42,16 +42,6 @@ const HeaderMenu = ({ auth, isOrganizationsPath }) => {
     setOpen(!open);
   };
 
-  const handleMenuOne = () => {
-    // do something
-    setOpen(false);
-  };
-
-  const handleMenuTwo = () => {
-    // do something
-    setOpen(false);
-  };
-
   return (
     <>
       <Dropdown
@@ -100,7 +90,7 @@ const HeaderMenu = ({ auth, isOrganizationsPath }) => {
 const Dropdown = ({ open, trigger, menu, isOrganizationsPath }) => {
   return (
     <>
-      <StyledDropdown isOrganizationsPath={isOrganizationsPath}>
+      <StyledDropdown $isOrganizationsPath={isOrganizationsPath}>
         {trigger}
         {open ? (
           <DropdownMenu data-cy="menuList">
diff --git a/src/components/HoverTag/index.tsx b/src/components/HoverTag/index.tsx
index 2b0a4666..c7286c1a 100644
--- a/src/components/HoverTag/index.tsx
+++ b/src/components/HoverTag/index.tsx
@@ -21,8 +21,8 @@ const textPairs = {
 
 const HoverTag: FC<Props> = ({ tooltipPosition, tagColor, maxWidth, text, textColor, formatToReadableText }) => {
   const toolTipTextProps = {
-    ...(maxWidth ? { maxWidth } : {}),
-    ...(textColor ? { textColor } : {}),
+    ...(maxWidth ? { $maxWidth: maxWidth } : {}),
+    ...(textColor ? { $textColor: textColor } : {}),
   };
 
   const formatText = (textProp: Props['text']) => {
diff --git a/src/components/HoverTag/styles.tsx b/src/components/HoverTag/styles.tsx
index 4acc8a2f..a7d24f68 100644
--- a/src/components/HoverTag/styles.tsx
+++ b/src/components/HoverTag/styles.tsx
@@ -1,10 +1,10 @@
 import styled from 'styled-components';
 
-export const TooltipText = styled.p<{ maxWidth?: string; textColor?: string }>`
+export const TooltipText = styled.p<{ $maxWidth?: string; $textColor?: string }>`
   margin: unset;
-  max-width: ${props => (props.maxWidth ? props.maxWidth : '150px')};
+  max-width: ${props => (props.$maxWidth ? props.$maxWidth : '150px')};
   margin: unset;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: ${props => (props.textColor ? props.textColor : '#fff')};
+  color: ${props => (props.$textColor ? props.$textColor : '#fff')};
 `;
diff --git a/src/components/Organizations/GroupMembers/index.js b/src/components/Organizations/GroupMembers/index.js
index 6a4e600c..e6303970 100644
--- a/src/components/Organizations/GroupMembers/index.js
+++ b/src/components/Organizations/GroupMembers/index.js
@@ -127,7 +127,7 @@ const GroupMembers = ({
         const isDefaultUser = email.startsWith('default-user');
         if (isDefaultUser)
           return (
-            <Tag style={{ display: 'inline' }} background="#262D65">
+            <Tag style={{ display: 'inline' }} $background="#262D65">
               DEFAULT USER
             </Tag>
           );
@@ -271,7 +271,7 @@ const GroupMembers = ({
 
             <ProjectLink projectSlug={project.name} key={project.id} openInTab>
               <Tooltip overlayClassName="orgTooltip" title="View Dashboard" placement="bottom">
-                <ProjectDashboard inlineLink>
+                <ProjectDashboard $inlineLink>
                   <IconDashboard />
                 </ProjectDashboard>
               </Tooltip>
diff --git a/src/components/Organizations/Groups/index.js b/src/components/Organizations/Groups/index.js
index 2e4ba27c..f928e093 100644
--- a/src/components/Organizations/Groups/index.js
+++ b/src/components/Organizations/Groups/index.js
@@ -72,7 +72,7 @@ const Groups = ({ groups = [], organizationId, organizationName, ableToAddGroup,
             <span>
               {i.name}{' '}
               {i.type === 'project-default-group' && (
-                <Tag style={{ display: 'inline' }} background="#262D65">
+                <Tag style={{ display: 'inline' }} $background="#262D65">
                   SYSTEM GROUP
                 </Tag>
               )}
diff --git a/src/components/Organizations/Manage/index.js b/src/components/Organizations/Manage/index.js
index db7a7853..9764483d 100644
--- a/src/components/Organizations/Manage/index.js
+++ b/src/components/Organizations/Manage/index.js
@@ -80,7 +80,7 @@ const Manage = ({ users = [], organization, organizationName, refetch }) => {
         const isDefaultUser = email.startsWith('default-user');
         if (isDefaultUser)
           return (
-            <Tag style={{ display: 'inline' }} background="#262D65">
+            <Tag style={{ display: 'inline' }} $background="#262D65">
               DEFAULT USER
             </Tag>
           );
@@ -98,11 +98,11 @@ const Manage = ({ users = [], organization, organizationName, refetch }) => {
             </div>
 
             {owner ? (
-              <Tag style={{ display: 'inline-block', marginLeft: '2.5rem' }} background="#47D3FF">
+              <Tag style={{ display: 'inline-block', marginLeft: '2.5rem' }} $background="#47D3FF">
                 ORG OWNER
               </Tag>
             ) : (
-              <Tag style={{ display: 'inline-block', marginLeft: '2.5rem' }} background="#FF4747">
+              <Tag style={{ display: 'inline-block', marginLeft: '2.5rem' }} $background="#FF4747">
                 ORG VIEWER
               </Tag>
             )}
diff --git a/src/components/Organizations/Organization/Styles.tsx b/src/components/Organizations/Organization/Styles.tsx
index 248fb2a0..ce90b5c8 100644
--- a/src/components/Organizations/Organization/Styles.tsx
+++ b/src/components/Organizations/Organization/Styles.tsx
@@ -173,7 +173,7 @@ export const StyledOverview = styled.div`
   }
 `;
 
-export const LinkBtn = styled.a`
+export const LinkBtn = styled.span`
   margin-top: 25px;
   background: #4b84ff;
   color: #fff;
@@ -197,16 +197,16 @@ export const LinkBtn = styled.a`
   }
 `;
 
-export const ManageBtn = styled.a`
+export const ManageBtn = styled.p`
   margin-top: 25px;
   background: #4b84ff;
   color: #fff;
-  display: inline-block;
+  align-items: center;
   min-width: 115px;
   width: max-content;
   padding: 6px 15px;
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 10px;
   transition: all 0.15s ease;
diff --git a/src/components/Organizations/Organization/index.js b/src/components/Organizations/Organization/index.js
index f18c3d78..e2b7d99a 100644
--- a/src/components/Organizations/Organization/index.js
+++ b/src/components/Organizations/Organization/index.js
@@ -269,11 +269,11 @@ const Organization = ({ organization, refetch }) => {
                     <div className="email">{owner.email} </div>
 
                     {owner.owner ? (
-                      <Tag style={{ display: 'inline-block', marginLeft: '1.5rem' }} background="#47D3FF">
+                      <Tag style={{ display: 'inline-block', marginLeft: '1.5rem' }} $background="#47D3FF">
                         ORG OWNER
                       </Tag>
                     ) : (
-                      <Tag style={{ display: 'inline-block', marginLeft: '1.5rem' }} background="#FF4747">
+                      <Tag style={{ display: 'inline-block', marginLeft: '1.5rem' }} $background="#FF4747">
                         ORG VIEWER
                       </Tag>
                     )}
diff --git a/src/components/Organizations/Organizations/OrganizationsSkeleton.tsx b/src/components/Organizations/Organizations/OrganizationsSkeleton.tsx
index 2fae3a34..40191e0c 100644
--- a/src/components/Organizations/Organizations/OrganizationsSkeleton.tsx
+++ b/src/components/Organizations/Organizations/OrganizationsSkeleton.tsx
@@ -8,7 +8,7 @@ import { Organization, OrganizationsPage, OrgsHeader, SearchInput } from './Styl
 const OrganizationsSkeleton = () => {
   const RenderSkeletonBox = (index: number) => {
     return (
-      <Box className="box">
+      <Box className="box" key={index}>
         <Organization>
           <h4>
             <Skeleton style={{ width: `${index % 2 ? '50%' : '80%'}` }} />
diff --git a/src/components/Organizations/Projects/Styles.tsx b/src/components/Organizations/Projects/Styles.tsx
index a5fccfee..a8ec3e21 100644
--- a/src/components/Organizations/Projects/Styles.tsx
+++ b/src/components/Organizations/Projects/Styles.tsx
@@ -166,9 +166,9 @@ export const OrgProjectWrapper = styled.div`
   }
 `;
 
-export const ProjectDashboard = styled.div<{ inlineLink?: boolean }>`
+export const ProjectDashboard = styled.div<{ $inlineLink?: boolean }>`
   ${props =>
-    !props.inlineLink
+    !props.$inlineLink
       ? `
   margin-left:1.5rem;
   font-size:13px;
diff --git a/src/components/Organizations/Projects/index.js b/src/components/Organizations/Projects/index.js
index 24927a5b..2979d006 100644
--- a/src/components/Organizations/Projects/index.js
+++ b/src/components/Organizations/Projects/index.js
@@ -69,7 +69,7 @@ const OrgProjects = ({ projects = [], organizationId, organizationName, refresh,
           <TableActions style={{ marginLeft: 'auto', gap: '1rem' }}>
             <ProjectLink projectSlug={project.name} key={project.id} openInTab>
               <Tooltip overlayClassName="orgTooltip" title="View Dashboard" placement="bottom">
-                <ProjectDashboard inlineLink>
+                <ProjectDashboard $inlineLink>
                   <IconDashboard />
                 </ProjectDashboard>
               </Tooltip>
diff --git a/src/components/Organizations/SharedStyles.tsx b/src/components/Organizations/SharedStyles.tsx
index a33d6ab7..ba652c07 100644
--- a/src/components/Organizations/SharedStyles.tsx
+++ b/src/components/Organizations/SharedStyles.tsx
@@ -250,9 +250,9 @@ export const sharedTableStyles = css`
   }
 `;
 
-export const Tag = styled.div<{ background: string }>`
+export const Tag = styled.div<{ $background: string }>`
   border-radius: 5px;
-  background: ${props => props.background};
+  background: ${props => props.$background};
   padding: 3px 8px;
   font-weight: 600;
   font-size: 12px;
diff --git a/src/components/Organizations/Users/index.js b/src/components/Organizations/Users/index.js
index 2c7a1a3e..14c26923 100644
--- a/src/components/Organizations/Users/index.js
+++ b/src/components/Organizations/Users/index.js
@@ -87,7 +87,7 @@ const Users = ({ users = [], organization, organizationId, organizationName, ref
         const isDefaultUser = email.startsWith('default-user');
         if (isDefaultUser)
           return (
-            <Tag style={{ display: 'inline' }} background="#262D65">
+            <Tag style={{ display: 'inline' }} $background="#262D65">
               DEFAULT USER
             </Tag>
           );
diff --git a/src/components/ProjectVariables/ProjectVariablesSkeleton.tsx b/src/components/ProjectVariables/ProjectVariablesSkeleton.tsx
index 8bbb2117..6fad0bb3 100644
--- a/src/components/ProjectVariables/ProjectVariablesSkeleton.tsx
+++ b/src/components/ProjectVariables/ProjectVariablesSkeleton.tsx
@@ -7,8 +7,8 @@ import { StyledProjectVariableTable, StyledProjectVariablesDetails } from './Sty
 const ProjectVariablesSkeleton = () => {
   const numberOfVariableFields = 3;
 
-  const skeletonItem = (
-    <div className="data-row">
+  const skeletonItem = (idx: number) => (
+    <div className="data-row" key={idx}>
       <div className="varName">
         <Skeleton width={'90%'} />
       </div>
@@ -36,7 +36,9 @@ const ProjectVariablesSkeleton = () => {
             <label>Scope</label>
           </div>
         </div>
-        <div className="data-table">{[...Array<undefined>(numberOfVariableFields)].map(() => skeletonItem)}</div>
+        <div className="data-table">
+          {[...Array<undefined>(numberOfVariableFields)].map((_, idx) => skeletonItem(idx))}
+        </div>
       </StyledProjectVariableTable>
     </StyledProjectVariablesDetails>
   );
diff --git a/src/components/Projects/ProjectsSkeleton.tsx b/src/components/Projects/ProjectsSkeleton.tsx
index a1707062..57130148 100644
--- a/src/components/Projects/ProjectsSkeleton.tsx
+++ b/src/components/Projects/ProjectsSkeleton.tsx
@@ -11,7 +11,7 @@ interface Props {
 const ProjectsSkeleton = ({ setSearch }: Props) => {
   const RenderSkeletonBox = (index: number) => {
     return (
-      <Box className="box">
+      <Box className="box" key={index}>
         <StyledProject>
           <h4>
             <Skeleton style={{ width: `${index % 2 ? '50%' : '80%'}` }} />
diff --git a/src/components/Tasks/TasksSkeleton.tsx b/src/components/Tasks/TasksSkeleton.tsx
index a5fe4008..409c81fc 100644
--- a/src/components/Tasks/TasksSkeleton.tsx
+++ b/src/components/Tasks/TasksSkeleton.tsx
@@ -6,8 +6,8 @@ import { StyledTasks, TasksTable } from './StyledTasks';
 const TasksSkeleton = () => {
   const numberOfItems = typeof window !== 'undefined' ? Math.floor((window.innerHeight * 8) / 10 / 65) : 10;
 
-  const itemRender = (
-    <div className="taskRow">
+  const itemRender = (idx: number) => (
+    <div className="taskRow" key={idx}>
       <div className="data-row">
         <div className="name">
           <Skeleton />
@@ -36,7 +36,9 @@ const TasksSkeleton = () => {
         <label className="service">Service</label>
         <label className="status">Status</label>
       </div>
-      <TasksTable className="data-table">{[...Array<undefined>(numberOfItems)].map(() => itemRender)}</TasksTable>
+      <TasksTable className="data-table">
+        {[...Array<undefined>(numberOfItems)].map((_, idx) => itemRender(idx))}
+      </TasksTable>
     </StyledTasks>
   );
 };
diff --git a/src/lib/withKeycloak.js b/src/lib/withKeycloak.js
index 3ce0a3c8..05b713b7 100644
--- a/src/lib/withKeycloak.js
+++ b/src/lib/withKeycloak.js
@@ -18,20 +18,28 @@ export default (App, initialAuth) => {
     }
 
     async componentDidMount() {
-      const keycloak = Keycloak({
+      const keycloak = new Keycloak({
         url: publicRuntimeConfig.KEYCLOAK_API,
         realm: 'lagoon',
         clientId: 'lagoon-ui',
       });
 
       keycloak.onTokenExpired = async () => {
-        await keycloak.updateToken();
-        this.setAuth(keycloak);
+        try {
+          await keycloak.updateToken();
+          this.setAuth(keycloak);
+        } catch (err) {
+          console.error('Error refreshing token', err.message);
+        }
       };
 
-      await keycloak.init({
-        checkLoginIframe: false,
-      });
+      try {
+        await keycloak.init({
+          checkLoginIframe: false,
+        });
+      } catch (err) {
+        console.error('Authentication error', err.message);
+      }
 
       if (!keycloak.authenticated) {
         const urlQuery = queryStringToObject(location.search);
diff --git a/src/pages/organizations/organizations.js b/src/pages/organizations/index.js
similarity index 100%
rename from src/pages/organizations/organizations.js
rename to src/pages/organizations/index.js
diff --git a/src/stories/organizations/organizations.stories.tsx b/src/stories/organizations/organizations.stories.tsx
index bac5eeee..36205c6d 100644
--- a/src/stories/organizations/organizations.stories.tsx
+++ b/src/stories/organizations/organizations.stories.tsx
@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { graphql } from 'msw';
 
 import { getOrganization } from '../../../.storybook/mocks/api';
-import OrganizationsPage from '../../pages/organizations/organizations';
+import OrganizationsPage from '../../pages/organizations';
 
 const meta: Meta<typeof OrganizationsPage> = {
   title: 'Pages/Organizations/AllOrganizations',