HackYourFuture · stasel · Jan 20, 2026 · Jan 20, 2026
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link href="src/assets/HYF_icon.jpeg" rel="icon" type="image/x-icon">
+    <link href="src/assets/favicon.png" rel="icon" type="image/x-icon" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Dojo Project</title>
   </head>

@@ -31,7 +31,7 @@ export const ProfileSidebar = ({ traineeId }: ProfileSidebarProps) => {
       alignItems="center"
       gap={2}
       color="black"
-      bgcolor="#d1fbe6"
+      bgcolor="var(--hyf-beige)"
       height="100vh"
       paddingX={4}
       paddingY={4}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import HYFLogo from '../assets/HYF_logo.svg';
+import HYFLogo from '../assets/hyf-logo-beige.png';
 import SearchIcon from '@mui/icons-material/Search';
 import MenuIcon from '@mui/icons-material/Menu';
 import { useAuth } from '../hooks';
@@ -64,12 +64,12 @@ export const ResponsiveNavBar = () => {
 
   return (
     <Box sx={{ flexGrow: 1 }}>
-      <AppBar position="static" sx={{ bgcolor: 'black' }}>
+      <AppBar position="static" sx={{ backgroundColor: '#5E1600' }}>
         <Container maxWidth={false}>
           <Toolbar disableGutters>
             <Box component="div">
               <Link to="/home">
-                <img src={HYFLogo} height="60" alt="HYF navbar logo" className="hyf-navbar-logo-img" />
+                <img src={HYFLogo} height="40" alt="HYF navbar logo" className="hyf-navbar-logo-img" />
               </Link>
             </Box>
 

@@ -18,7 +18,7 @@ export const SidebarJobPath = ({ jobPath }: JobPathProps) => {
   const jobChipColor = (status: JobPath | string) => {
     switch (status) {
       case JobPath.Searching:
-        return 'primary';
+        return 'info';
       case JobPath.Internship:
       case JobPath.TechJob:
         return 'success';

@@ -17,7 +17,7 @@ export const SidebarLearningStatus = ({ learningStatus }: LearningStatusProps) =
   const chipColor = (status: LearningStatus | undefined) => {
     switch (status) {
       case LearningStatus.Studying:
-        return 'primary';
+        return 'info';
       case LearningStatus.Graduated:
         return 'success';
       case LearningStatus.OnHold:

@@ -12,6 +12,15 @@ import { RouterProvider } from 'react-router-dom';
 import { router } from './routes';
 
 const theme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#B12900',
+    },
+    background: {
+      default: '#ffffff',
+    },
+  },
   typography: {
     button: {
       textTransform: 'none',

@@ -1,4 +1,4 @@
-import HYFLogo from '../assets/HYF_logo.svg';
+import HYFLogo from '../assets/hyf-logo-red.png';
 import { useAuth } from '../hooks';
 import { ErrorBox } from '../components';
 import { Button, Stack } from '@mui/material';

@@ -2,7 +2,7 @@ import { ErrorBox, SearchBar, SearchResultsList } from '../components';
 import { useCallback, useEffect, useState } from 'react';
 
 import { Box } from '@mui/material';
-import HYFLogo from '../assets/HYF_logo.svg';
+import HYFLogo from '../assets/hyf-logo-red.png';
 import { useTraineeSearchData } from '../hooks/useTraineeSearchData';
 
 /**

@@ -15,6 +15,7 @@ body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  --hyf-beige: #faf5d9;
 }
 
 @media (prefers-color-scheme: light) {
@@ -27,8 +28,10 @@ body {
 
 .hyf-navbar-logo-img {
   max-width: 100%;
+  height: 20px;
   vertical-align: middle;
-  padding: 8px 0;
+  padding: 0;
+  margin-right: 15px;
   display: inline-block;
   border: 0;
   box-sizing: border-box;
@@ -45,8 +48,7 @@ body {
 }
 
 .hyf-logo-img {
-  height: 100px;
-  background-color: black;
+  height: 70px;
   padding: 10px;
   margin-bottom: 50px;
 }
@@ -72,13 +74,6 @@ body {
   min-width: 200px;
 }
 
-.hyf-logo-img {
-  height: 100px;
-  background-color: black;
-  padding: 10px;
-  margin-bottom: 50px;
-}
-
 .input-wrapper {
   background-color: white;
   width: 100%;