diff --git a/front/src/public/create-list.html b/front/src/public/create-list.html
index d31a8cf7..03666774 100644
--- a/front/src/public/create-list.html
+++ b/front/src/public/create-list.html
@@ -7,6 +7,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" type="image/x-icon" href="images/favicon.ico">
   <link href="styles/bootstrap/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
+    integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
+    crossorigin="anonymous" referrerpolicy="no-referrer">
   <link rel="stylesheet" href="styles/styles.css">
   <link rel="stylesheet" href="styles/create-list.css">
   <script src="scripts/bootstrap/bootstrap.bundle.min.js"></script>
@@ -15,10 +18,38 @@
 </head>
 
 <body class="text-center">
-  <div class="accordion w-60" id="accordion">
 
-    <input class="form-control mb-2" list="datalistOptions" id="exampleDataList" placeholder="Type to add topic...">
-    <datalist id="datalistOptions">
+  <nav class="navbar navbar-expand-lg bg-black">
+    <div class="container-fluid">
+      <div class="row align-items-center">
+        <div class="col-1">
+          <a class="navbar-brand" href="index.html">
+            <img src="images/alistLogo.svg" alt="" width="80" height="30">
+          </a>
+        </div>
+        <div class="col-3 d-flex justify-content-around ps-5 pe-2">
+          <i class="fa-regular fa-compass fa-xl"></i>
+        </div>
+        <div class="col-4 ps-0">
+          <form class="d-flex" role="search">
+            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+          </form>
+        </div>
+        <div class="col-4 d-flex justify-content-around">
+          <i class="fa-regular fa-heart fa-xl"></i>
+          <i class="fa-regular fa-user fa-xl"></i>
+        </div>
+      </div>
+    </div>
+    </div>
+  </nav>
+
+  <div class="accordion mt-3 mb-3" id="accordion">
+
+    <input class="form-control mb-2" id="topTitle" placeholder="Write a title...">
+
+    <input class="form-control mb-2" list="topicOptions" id="topicList" placeholder="Type to add topic...">
+    <datalist id="topicOptions">
       <option value="Sports">
       <option value="Anime">
       <option value="Characters">
@@ -36,8 +67,9 @@ <h2 class="accordion-header" id="headingOne">
       <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
         data-bs-parent="#accordion">
         <div class="accordion-body">
-          <img class="img-fluid rounded float-right mb-2" id="imgOne" src="#" alt="">
-          <input class="form-control mb-2" type="text" id="formDescriptionOne" placeholder="description...">
+          <img class="img-fluid rounded mt-3" id="imgOne" src="#" alt="">
+          <input class="form-control mt-3 mb-2" type="text" id="formDescriptionOne"
+            placeholder="Write a description...">
           <input class="form-control" type="file" accept="image/*" id="formFileOne"
             onchange="loadFile(event, 'imgOne')">
         </div>
@@ -54,8 +86,9 @@ <h2 class="accordion-header" id="headingTwo">
       <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
         data-bs-parent="#accordion">
         <div class="accordion-body">
-          <img class="img-fluid rounded float-right mb-2" id="imgTwo" src="#" alt="">
-          <input class="form-control mb-2" type="text" id="formDescriptionTwo" placeholder="description...">
+          <img class="img-fluid rounded mt-3" id="imgTwo" src="#" alt="">
+          <input class="form-control mt-3 mb-2" type="text" id="formDescriptionTwo"
+            placeholder="Write a description...">
           <input class="form-control" type="file" accept="image/*" id="formFileTwo"
             onchange="loadFile(event, 'imgTwo')">
         </div>
@@ -72,8 +105,9 @@ <h2 class="accordion-header" id="headingThree">
       <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
         data-bs-parent="#accordion">
         <div class="accordion-body">
-          <img class="img-fluid rounded float-right mb-2" id="imgThree" src="#" alt="">
-          <input class="form-control mb-2" type="text" id="formDescriptionThree" placeholder="description...">
+          <img class="img-fluid rounded mt-3" id="imgThree" src="#" alt="">
+          <input class="form-control mt-3 mb-2" type="text" id="formDescriptionThree"
+            placeholder="Write a description...">
           <input class="form-control" type="file" accept="image/*" id="formFileThree"
             onchange="loadFile(event, 'imgThree')">
         </div>
@@ -90,8 +124,9 @@ <h2 class="accordion-header" id="headingFour">
       <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
         data-bs-parent="#accordion">
         <div class="accordion-body">
-          <img class="img-fluid rounded float-right mb-2" id="imgFour" src="#" alt="">
-          <input class="form-control mb-2" type="text" id="formDescriptionFour" placeholder="description...">
+          <img class="img-fluid rounded mt-3" id="imgFour" src="#" alt="">
+          <input class="form-control mt-3 mb-2" type="text" id="formDescriptionFour"
+            placeholder="Write a description...">
           <input class="form-control" type="file" accept="image/*" id="formFileFour"
             onchange="loadFile(event, 'imgFour')">
         </div>
@@ -108,8 +143,9 @@ <h2 class="accordion-header" id="headingFive">
       <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive"
         data-bs-parent="#accordion">
         <div class="accordion-body">
-          <img class="img-fluid rounded float-right mb-2" id="imgFive" src="#" alt="">
-          <input class="form-control mb-2" type="text" id="formDescriptionFive" placeholder="description...">
+          <img class="img-fluid rounded mt-3" id="imgFive" src="#" alt="">
+          <input class="form-control mt-3 mb-2" type="text" id="formDescriptionFive"
+            placeholder="Write a description...">
           <input class="form-control" type="file" accept="image/*" id="formFileFive"
             onchange="loadFile(event, 'imgFive')">
         </div>
diff --git a/front/src/public/scripts/create-list.js b/front/src/public/scripts/create-list.js
index 8f757ebd..56002bb0 100644
--- a/front/src/public/scripts/create-list.js
+++ b/front/src/public/scripts/create-list.js
@@ -1,6 +1,4 @@
 const loadFile = function (event, id) {
   const image = document.getElementById(id);
-  image.style.height = '100px';
-  image.style.width = '100px';
   image.src = URL.createObjectURL(event.target.files[0]);
 };
diff --git a/front/src/public/scripts/js/profile.js b/front/src/public/scripts/js/profile.js
deleted file mode 100644
index d07f49e1..00000000
--- a/front/src/public/scripts/js/profile.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const loadFile = function (event, id) {
-    var image = document.getElementById(id);
-    image.style.height = '100px';
-    image.style.width = '100px';
-    image.src = URL.createObjectURL(event.target.files[0]);
-  };
-  
\ No newline at end of file
diff --git a/front/src/public/styles/create-list.css b/front/src/public/styles/create-list.css
index 420d2788..c4d30470 100644
--- a/front/src/public/styles/create-list.css
+++ b/front/src/public/styles/create-list.css
@@ -1,28 +1,59 @@
-html,
-body {
-  height: 100%;
+#topTitle,
+#topicList {
+  width: 90%;
+  margin: auto;
 }
 
-body {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.accordion-button:not(.collapsed)::after {
+  background: var(--bs-accordion-btn-icon);
+  filter: brightness(1000%);
+  -webkit-filter: brightness(1000%);
 }
 
-img {
+.accordion-button:not(.collapsed) {
+  background-color: #2d474f;
+  color: white;
+}
+
+.accordion-button:focus {
+  border-color: #2d474f;
+  box-shadow: none;
+}
+
+.accordion-body img[src='#'] {
+  display: none;
+}
+
+.accordion-body img {
+  width: 200px;
+  height: 200px;
   object-fit: cover;
 }
 
-.accordion-item {
-  min-width: 398.5px;
+.accordion {
+  width: 100%;
 }
 
-.btn-primary {
-  background-color: #2d474f;
-  border: 0;
+.accordion-body {
+  padding-top: 0px;
+}
+
+.accordion-button {
+  font-size: 20px;
 }
 
-.btn-primary:hover,
-.btn-primary:active:focus {
-  background-color: #63b1b1;
+@media only screen and (min-width: 768px) {
+  /* For desktop: */
+  #topTitle,
+  #topicList {
+    width: 100%;
+  }
+  .accordion {
+    width: 60%;
+    margin: auto;
+  }
+  .accordion-body img {
+    width: 300px;
+    height: 300px;
+  }
 }
diff --git a/front/src/public/styles/styles.css b/front/src/public/styles/styles.css
index 8fb319df..adc59372 100644
--- a/front/src/public/styles/styles.css
+++ b/front/src/public/styles/styles.css
@@ -1,4 +1,32 @@
 body {
+  align-items: center;
   background-color: black;
-  overflow: hidden;
+}
+
+/* nav */
+.row {
+  width: 100vw;
+}
+
+.fa-regular {
+  color: white;
+}
+
+nav {
+  border-bottom: 1px solid gray;
+}
+
+i {
+  cursor: pointer;
+}
+
+/* button */
+.btn-primary {
+  background-color: #2d474f;
+  border: 0;
+}
+
+.btn-primary:hover,
+.btn-primary:active:focus {
+  background-color: #63b1b1;
 }
