diff --git a/css/experience.css b/css/experience.css
new file mode 100644
index 0000000..e171500
--- /dev/null
+++ b/css/experience.css
@@ -0,0 +1,3 @@
+#section3{
+    background-color: #53bf65;
+}
\ No newline at end of file
diff --git a/css/projects.css b/css/projects.css
new file mode 100644
index 0000000..6bdff84
--- /dev/null
+++ b/css/projects.css
@@ -0,0 +1,3 @@
+#section4{
+    background-color: #6c757d;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index ce27ca3..a2db411 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,8 @@
     <link rel="stylesheet" href="css/general.css">
     <link rel="stylesheet" href="css/home.css">
     <link rel="stylesheet" href="css/about.css">
+    <link rel="stylesheet" href="css/experience.css">
+    <link rel="stylesheet" href="css/projects.css">
 </head>
 <!-- The scrollable area -->
 <body data-spy="scroll" data-target=".navbar" data-offset="50">
@@ -103,7 +105,7 @@
 </div>
 
 <!-- Experience Page -->
-<div id="section3" class="tile" style="background-color: #53bf65">
+<div id="section3" class="tile">
     <div class="container">
         <h1>Experience</h1>
         <p>Todo about me page! Todo about me page! Todo about me page! Todo about me page! Todo about me page!
@@ -114,7 +116,7 @@
 </div>
 
 <!-- Projects Page -->
-<div id="section4" class="bg-secondary tile">
+<div id="section4" class="tile">
     <div class="container">
         <h1>Projects</h1>
         <p>Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page!
