diff --git a/Styling/style.css b/Styling/style.css
new file mode 100644
index 0000000..383eeb5
--- /dev/null
+++ b/Styling/style.css
@@ -0,0 +1,234 @@
+/* General Styles */
+body {
+	margin: 0;
+	font-family: 'Arial', sans-serif;
+	color: #333;
+	background-color: #f4f4f4;
+}
+
+/* Header Styles */
+header {
+	background-color: #1C1C1C;
+	color: #FFF;
+	padding: 20px;
+	position: sticky;
+	top: 0;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+	z-index: 1000;
+}
+
+header h1 {
+	font-size: 36px;
+	margin: 0;
+	font-family: 'Roboto', sans-serif;
+	text-transform: uppercase;
+}
+
+header nav {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	margin-top: 10px;
+}
+
+header nav ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+}
+
+header nav li {
+	margin-left: 20px;
+}
+
+header nav a {
+	color: #FFF;
+	text-decoration: none;
+	font-size: 18px;
+	font-weight: bold;
+	text-transform: uppercase;
+	transition: color 0.2s ease-in-out;
+}
+
+header nav a:hover {
+	color: #BB86FC;
+}
+
+/* Main Content Styles */
+main {
+	padding: 20px;
+}
+
+#hero {
+	text-align: center;
+	background-color: #FFF;
+	padding: 40px 20px;
+	border-radius: 8px;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+	margin-bottom: 40px;
+	position: relative;
+	overflow: hidden;
+}
+
+#hero img {
+	max-width: 100%;
+	height: auto;
+	border-radius: 8px;
+	margin-bottom: 20px;
+	transition: transform 0.2s ease-in-out;
+}
+
+#hero img:hover {
+	transform: scale(1.05);
+}
+
+#hero h2 {
+	font-size: 32px;
+	color: #333;
+	margin: 0 0 20px;
+	font-family: 'Roboto', sans-serif;
+}
+
+#hero p {
+	font-size: 18px;
+	margin: 20px 0;
+	color: #666;
+	line-height: 1.5;
+}
+
+.btn {
+	display: inline-block;
+	background-color: #1C1C1C;
+	color: #FFF;
+	padding: 12px 24px;
+	text-decoration: none;
+	font-size: 16px;
+	border-radius: 5px;
+	transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
+	font-family: 'Roboto', sans-serif;
+}
+
+.btn:hover {
+	background-color: #BB86FC;
+	transform: translateY(-2px);
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Section Styles */
+section {
+	background-color: #FFF;
+	padding: 20px;
+	border-radius: 8px;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+	margin-bottom: 40px;
+}
+
+section h2 {
+	font-size: 28px;
+	margin-bottom: 20px;
+	font-family: 'Roboto', sans-serif;
+	color: #333;
+}
+
+section p {
+	font-size: 18px;
+	margin-bottom: 20px;
+	color: #666;
+	line-height: 1.5;
+}
+
+section ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+section li {
+	margin-bottom: 10px;
+}
+
+section a {
+	color: #1C1C1C;
+	text-decoration: none;
+	transition: color 0.2s ease-in-out;
+}
+
+section a:hover {
+	color: #BB86FC;
+}
+
+/* Footer Styles */
+footer {
+	background-color: #1C1C1C;
+	color: #FFF;
+	text-align: center;
+	padding: 20px;
+	position: sticky;
+	bottom: 0;
+	width: 100%;
+	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+	header nav ul {
+		flex-direction: column;
+		align-items: center;
+	}
+
+	header nav li {
+		margin: 10px 0;
+	}
+
+	#hero {
+		padding: 20px 10px;
+	}
+
+	#hero h2 {
+		font-size: 28px;
+	}
+
+	#hero p {
+		font-size: 16px;
+	}
+
+	section h2 {
+		font-size: 24px;
+	}
+
+	section p {
+		font-size: 16px;
+	}
+}
+
+@media (max-width: 480px) {
+	header nav {
+		justify-content: center;
+	}
+
+	header h1 {
+		font-size: 28px;
+	}
+
+	#hero h2 {
+		font-size: 24px;
+	}
+
+	#hero p {
+		font-size: 14px;
+	}
+
+	.btn {
+		font-size: 14px;
+		padding: 10px 20px;
+	}
+
+	section h2 {
+		font-size: 20px;
+	}
+
+	section p {
+		font-size: 14px;
+	}
+}
diff --git a/images/ALX.jpeg b/images/ALX.jpeg
new file mode 100644
index 0000000..1745913
Binary files /dev/null and b/images/ALX.jpeg differ
diff --git a/index.html b/index.html
index cb71876..bbf414d 100644
--- a/index.html
+++ b/index.html
@@ -4,44 +4,7 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>ALX Student's Contribution</title>
-	<style>
-		header {
-			background-color: #1C1C1C;
-			color: #FFF;
-			padding: 20px;
-			position: sticky;
-			top: 0;
-		}
-		header h1 {
-			font-size: 36px;
-			margin: 0;
-		}
-		header nav {
-			display: flex;
-			justify-content: flex-end;
-			margin-top: 20px;
-		}
-		header nav ul {
-			list-style: none;
-			margin: 0;
-			padding: 0;
-		}
-		header nav li {
-			margin-left: 20px;
-		}
-		header nav a {
-			color: #FFF;
-			text-decoration: none;
-			font-size: 18px;
-			font-weight: bold;
-			text-transform: uppercase;
-			transition: all 0.2s ease-in-out;
-		}
-		header nav a:hover {
-			color: #BB86FC;
-		}
-	</style>
-	<link rel="stylesheet" type="text/css" href="style.css">
+	<link rel="stylesheet" type="text/css" href="./Styling/style.css">
 </head>
 <body>
 	<header>
@@ -57,6 +20,7 @@ <h1>ALX Student's Contribution</h1>
 	
 	<main>
 		<section id="hero">
+			<img src="./images/ALX.jpeg" alt="Software Engineering">
 			<h2>Welcome to our Community</h2>
 			<p>Join our growing community of developers, designers, writers, reviewers, and contributors from all over the world. Explore our past and present projects and become a part of our journey towards excellence.</p>
 			<a href="#contribution-guidelines" class="btn">Get Started</a>
@@ -94,4 +58,7 @@ <h2>About Us</h2>
 	</main>
 	
 	<footer>
-		<p>
+		<p>&copy; 2024 ALX Student's Contribution. All rights reserved.</p>
+	</footer>
+</body>
+</html>