diff --git a/frontend/src/components/Navigation.jsx b/frontend/src/components/Navigation.jsx
new file mode 100644
index 0000000..7348c8d
--- /dev/null
+++ b/frontend/src/components/Navigation.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+const Navigation = ({ active }) => {
+  return (
+    <div className="app__navigation">
+      {['home', 'about', 'skills', 'work', 'testimonials', 'contact'].map((item, index) => (
+          <a 
+          href={`#${item}`}
+          key={item+index} 
+          className="app__navigation-dot"
+          style={active === item ? { backgroundColor: '#313bac' } : {}}
+          />
+      ))}
+    </div>
+  )
+}
+
+export default Navigation
\ No newline at end of file
diff --git a/frontend/src/components/SocialMedia.jsx b/frontend/src/components/SocialMedia.jsx
new file mode 100644
index 0000000..c4e2999
--- /dev/null
+++ b/frontend/src/components/SocialMedia.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { BsTwitter, BsInstagram } from 'react-icons/bs'
+import { FaFacebookF } from 'react-icons/fa'
+
+const SocialMedia = () => {
+  return (
+    <div className="app__social">
+      <div>
+        <BsTwitter />
+      </div>
+      <div>
+        <BsInstagram />
+      </div>
+      <div>
+        <FaFacebookF />
+      </div>
+    </div>
+  )
+}
+
+export default SocialMedia
\ No newline at end of file
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
new file mode 100644
index 0000000..721be62
--- /dev/null
+++ b/frontend/src/components/index.js
@@ -0,0 +1,3 @@
+export { default as Navigation } from './Navigation';
+export { default as SocialMedia } from './SocialMedia';
+export { default as Navbar } from '../components/Navbar/Navbar';
\ No newline at end of file
diff --git a/frontend/src/containers/About/About.jsx b/frontend/src/containers/About/About.jsx
index a122254..9e5c49a 100644
--- a/frontend/src/containers/About/About.jsx
+++ b/frontend/src/containers/About/About.jsx
@@ -3,6 +3,7 @@ import { motion } from 'framer-motion'
 
 import './About.scss'
 import { urlFor, client } from '../../client'
+import { AppWrap } from '../../wrapper'
 
 const About = () => {
   const [talents, setTalents] = useState([])
@@ -40,4 +41,4 @@ const About = () => {
   )
 }
 
-export default About
\ No newline at end of file
+export default AppWrap(About, 'about')
\ No newline at end of file
diff --git a/frontend/src/containers/Header/Header.jsx b/frontend/src/containers/Header/Header.jsx
index cfb1efd..778d2d2 100644
--- a/frontend/src/containers/Header/Header.jsx
+++ b/frontend/src/containers/Header/Header.jsx
@@ -3,6 +3,7 @@ import { motion } from 'framer-motion'
 
 import './Header.scss'
 import { images } from '../../constants'
+import { AppWrap } from '../../wrapper'
 
 const scaleVariance = {
   whileInView: {
@@ -67,4 +68,4 @@ const Header = () => {
 }
 
 
-export default Header
\ No newline at end of file
+export default AppWrap(Header, 'home')
\ No newline at end of file
diff --git a/frontend/src/wrapper/AppWrap.js b/frontend/src/wrapper/AppWrap.js
new file mode 100644
index 0000000..96cdfec
--- /dev/null
+++ b/frontend/src/wrapper/AppWrap.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Navigation, SocialMedia } from '../components'
+
+const AppWrap = (Component, idName, classNames) => function HOC() {
+  return (
+    <div id={idName} className={`app__container ${classNames}`}>
+      <SocialMedia />
+      <div className="app__wrapper app__flex">
+        <Component />
+
+        <div className="copyright">
+          <p className="p-text">&copy;2022 MICAEL</p>
+          <p className="p-text">All rights reserved</p>
+        </div>
+      </div>
+      <Navigation active={idName} />
+    </div>
+  )
+}
+
+export default AppWrap
\ No newline at end of file
diff --git a/frontend/src/wrapper/index.js b/frontend/src/wrapper/index.js
new file mode 100644
index 0000000..6e48030
--- /dev/null
+++ b/frontend/src/wrapper/index.js
@@ -0,0 +1 @@
+export { default as AppWrap } from './AppWrap';
\ No newline at end of file