diff --git a/css/style.css b/css/style.css
index e69de29..314d0f3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,18 @@
+#body_page{
+  display: flex;
+  flex-direction: row;
+}
+#side_bar{
+  background-color:brown;
+  display:flex;
+  flex-direction: column;
+  justify-content:center;
+  height: 100vh;
+  width: 30vw;
+}
+#menu{
+  list-style-type:none;
+}
+#navagtor{
+  
+}
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..e69de29
diff --git a/main.html b/main.html
index fd44190..cdda1ea 100644
--- a/main.html
+++ b/main.html
@@ -8,9 +8,16 @@
     <!-- Bootstrap CSS -->
     <title>Show log</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+
+    <!-- CSS -->
+    <link href="./css/style.css" rel="stylesheet">
+
+    <!-- JS -->
+    <script src="./js/main.js"></script>
+
 </head>
 <body>
-    <div id = "body">
+    <div id = "body_page">
       <!--might make this entire thing a div-->
       <div id = "side_bar">
        <h1>
@@ -37,7 +44,7 @@
         </div>
       </div>
       <!--this is where they show the info for the book/ maybe make it into a data base-->
-      <div id ="libary">
+      <div id ="homepage">
         <div>
           <!--welcome message/ search bar / add button-->
           <h1>