diff --git a/images/Thumbs.db b/images/Thumbs.db
new file mode 100644
index 0000000..d7b9257
Binary files /dev/null and b/images/Thumbs.db differ
diff --git a/index.html b/index.html
index 56a0e2e..7543923 100644
--- a/index.html
+++ b/index.html
@@ -4,14 +4,23 @@
 <head>
     <meta charset="UTF-8">
     <title>Sanni's Journal</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 
 <body>
     <header>
         <h1>Sanni's Journal</h1>
-        <h2>So fresh and so clean</h2>
+        <h2>So fresh and so clean</h2>       
     </header>
+    <div class="btn">
+        <button>Add a new note</button>
+    </div>
+    <div class="countNum">
+        <h1> 0 </h1>
+    </div>
+    
     <main>
+    <div class="box-1">
         <article>
             <h2>13/05/23: Spatulas</h2>
             <p><img src="images/spatula.gif" alt="spatulas"></p>
@@ -19,6 +28,8 @@ <h2>13/05/23: Spatulas</h2>
                 Yesterday I went to the store and got some much-needed <a href="https://www.youtube.com/watch?v=2XbCWmY0eqY">spatulas!</a> (What better way to say I love myself than to buy myself a spatula?)
             </p>
         </article>
+    </div>
+    <div class="box-2">
         <article>
             <h2>14/05/23: Cookie Monster Cupcakes</h2>
             <p><img src="images/cookiemonster.jpg" alt="cookie monster"></p>
@@ -28,19 +39,23 @@ <h2>14/05/23: Cookie Monster Cupcakes</h2>
             <p>Did you know? Cookie Monster once said, <q>Sometimes me think what is love, and then me think love is what last cookie is for. Me give up the last cookie for you.</q> I wonder if the same applies for cupcakes? (If so, I don't think I can ever love ANYONE!)
             </p>
         </article>
+    </div>
     </main>
     <hr>
     <footer>
     <h2>Stay connected</h2>
     <p>Join my mailing list.</p>
-    <form>
-        <p><input type="text" placeholder="First name"></p>
-        <p><input type="text" placeholder="Email"></p>
-        <p><input type="submit" value="Submit"></p>
-    </form>
-    <p>&copy; 2023 Sanni. No Rights Reserved.</p>
-    </footer>
 
+        <div class="form">
+            <p><input type="text" placeholder="First name"></p>
+            <p><input type="text" placeholder="Email"></p>
+       
+            <p><input type="submit" value="Submit"></p>
+        </div>
+
+    <p class="signature">&copy; 2023 Sanni. No Rights Reserved.</p>
+    </footer>
+    <script src="index.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..8db4cab
--- /dev/null
+++ b/index.js
@@ -0,0 +1,8 @@
+const btn = document.querySelector('.btn button');
+let countNum = document.querySelector('.countNum');
+
+btn.addEventListener('click', countUp); 
+
+function countUp(){
+    countNum.innerHTML += 1;
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..076a7b0
--- /dev/null
+++ b/style.css
@@ -0,0 +1,103 @@
+@import url(https://fonts.googleapis.com/css?family=Chelsea+Market);
+@import url(https://fonts.googleapis.com/css?family=Gamja+Flower);
+header{
+	background-color: #e4572e;
+	font-family: Chelsea Market;
+	text-align: center;
+	text-transform: capitalize;
+	margin-bottom: 20px;
+}
+
+.btn button{
+	padding: 10px 380px;
+	margin-left: 385px;
+	z-index: 1;
+	width: 54%;
+	position:relative;
+	background-color: black;
+	color: white;
+	box-shadow: 3px 3px #e4572e;
+	justify-content: center;
+	margin-bottom: 70px;
+	font-family: Gamja Flower;
+	font-size: 1rem;
+}
+
+.box-1 {	
+	width: 65%;
+	margin: auto;
+	font-family: Gamja Flower;
+	border: solid 4px #050401;
+	box-shadow: 3px 3px #e4572e;
+	padding-top: 0px;
+	padding-bottom: 70px;
+}
+
+.box-1 h2{
+	top: 275px;
+	position: absolute;
+	padding-top: 27px;
+}
+
+.box-1 p{
+	top: 100px;
+	padding-top: 2px;
+}
+
+.box-1 p img {
+	float: right;
+/*	left: 752px;*/
+	/*position: relative;*/
+}
+
+.box-2 {
+	width: 65%;
+	margin: auto;
+	font-family: Gamja Flower;
+	border: solid 4px #050401;
+	margin-top: 5px;
+	box-shadow: 3px 3px #e4572e;
+	padding-bottom: 70px;
+}
+
+.box-2 p img {
+	right: 5px;
+	bottom: 11px;
+	float: right;
+	position: relative;
+}
+
+.box-2 p{
+
+}
+
+footer {
+	width: 20%;
+	margin: auto;
+	font-family: Gamja Flower;
+}
+
+footer h2 {
+	padding-top: 0px;
+	margin-bottom: 0px;
+}
+
+footer p {
+	margin-top: 0px;
+}
+
+.form {
+	display: flex;
+	
+}
+
+.form input {
+	padding: 3px;
+	width: 97%;
+	box-shadow: 2px 2px #e4572e;
+}
+
+.signature {
+	width: 77%;
+	margin: auto;
+}
\ No newline at end of file
