diff --git a/src/layouts/common/darkModeToogle/DarkModeToogle.jsx b/src/layouts/common/darkModeToggle/DarkModeToggle.jsx
similarity index 76%
rename from src/layouts/common/darkModeToogle/DarkModeToogle.jsx
rename to src/layouts/common/darkModeToggle/DarkModeToggle.jsx
index 389c653..01810a9 100644
--- a/src/layouts/common/darkModeToogle/DarkModeToogle.jsx
+++ b/src/layouts/common/darkModeToggle/DarkModeToggle.jsx
@@ -5,12 +5,12 @@ import { ColorModeContext } from 'App';
 import WbSunnyOutlinedIcon from '@mui/icons-material/WbSunnyOutlined';
 import NightsStayOutlinedIcon from '@mui/icons-material/NightsStayOutlined';
 
-const DarkModeToogle = () => {
+const DarkModeToggle = () => {
 	const theme = useTheme();
 	const colorMode = useContext(ColorModeContext);
 
 	return (
-		<IconButton disableRipple onClick={colorMode.toggleColorMode} sx={{ color: theme.palette.text.secondary }} >
+		<IconButton onClick={colorMode.toggleColorMode} sx={{ color: theme.palette.text.secondary }} >
 			{theme.palette.mode === 'dark' ? (
 				<WbSunnyOutlinedIcon />
 			) : (
@@ -20,4 +20,4 @@ const DarkModeToogle = () => {
 	);
 };
 
-export default DarkModeToogle;
+export default DarkModeToggle;
diff --git a/src/layouts/common/darkModeToggle/index.js b/src/layouts/common/darkModeToggle/index.js
new file mode 100644
index 0000000..16838cc
--- /dev/null
+++ b/src/layouts/common/darkModeToggle/index.js
@@ -0,0 +1 @@
+export { default } from './DarkModeToggle';
\ No newline at end of file
diff --git a/src/layouts/common/darkModeToogle/index.js b/src/layouts/common/darkModeToogle/index.js
deleted file mode 100644
index 879552e..0000000
--- a/src/layouts/common/darkModeToogle/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './DarkModeToogle';
\ No newline at end of file
diff --git a/src/layouts/landing/components/header/Header.jsx b/src/layouts/landing/components/header/Header.jsx
index a1a2e31..5eac068 100644
--- a/src/layouts/landing/components/header/Header.jsx
+++ b/src/layouts/landing/components/header/Header.jsx
@@ -15,7 +15,7 @@ import {
 import { useTheme } from '@mui/material/styles';
 import ThreeSixtyOutlinedIcon from '@mui/icons-material/ThreeSixtyOutlined';
 
-import DarkModeToogle from 'layouts/common/darkModeToogle';
+import DarkModeToggle from 'layouts/common/darkModeToggle';
 import HideOnScroll from 'layouts/common/hideOnScroll';
 
 const handleScrollDown = (event) => {
@@ -75,7 +75,7 @@ const Header = () => {
 											<ThreeSixtyOutlinedIcon />
 										</IconButton>
 									</Link>
-									<DarkModeToogle />
+									<DarkModeToggle />
 								</Grid>
 							</Grid>
 						</Grid>
diff --git a/src/layouts/main/components/header/Header.jsx b/src/layouts/main/components/header/Header.jsx
index b569f1a..ce773c4 100644
--- a/src/layouts/main/components/header/Header.jsx
+++ b/src/layouts/main/components/header/Header.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { AppBar, Toolbar, CssBaseline, Box } from '@mui/material';
 
-import DarkModeToogle from 'layouts/common/darkModeToogle';
+import DarkModeToggle from 'layouts/common/darkModeToggle';
 import HideOnScroll from 'layouts/common/hideOnScroll';
 import Navigation from './navigation';
 
@@ -15,7 +15,7 @@ const Header = () => {
 					<Toolbar>
 						<Navigation />
 						<Box sx={{ display: { sm: 'block', xs: 'none' } }}>
-							<DarkModeToogle />
+							<DarkModeToggle />
 						</Box>
 					</Toolbar>
 				</AppBar>
diff --git a/src/layouts/main/components/header/navigation/Navigation.jsx b/src/layouts/main/components/header/navigation/Navigation.jsx
index 796f0af..5238989 100644
--- a/src/layouts/main/components/header/navigation/Navigation.jsx
+++ b/src/layouts/main/components/header/navigation/Navigation.jsx
@@ -16,7 +16,7 @@ import { useTheme } from '@mui/material/styles';
 import MenuIcon from '@mui/icons-material/Menu';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
 
-import DarkModeToogle from 'layouts/common/darkModeToogle';
+import DarkModeToggle from 'layouts/common/darkModeToggle';
 
 const Navigation = () => {
 	const theme = useTheme();
@@ -109,7 +109,7 @@ const Navigation = () => {
 						<MenuIcon fontSize='inherit' />
 					)}
 				</IconButton>
-				<DarkModeToogle style={{ alignSelf: 'right', color: 'inherit' }} />
+				<DarkModeToggle style={{ alignSelf: 'right', color: 'inherit' }} />
 			</Paper>
 
 			{matches ? (