diff --git a/app.py b/app.py
index 08d5f14..29d8b33 100644
--- a/app.py
+++ b/app.py
@@ -119,9 +119,11 @@ def pcc():
         praise = float(request.form['raise'])
         dropped_value = starting - (starting * drop/100)
         new_value = dropped_value + dropped_value * praise/100
+        percent_to_normal = starting/dropped_value * 100
         value_chain.append(starting)
         value_chain.append(dropped_value)
         value_chain.append(new_value)
+        value_chain.append(percent_to_normal)
         print(value_chain)
         return render_template('pcc.html', value = value_chain)
     return render_template('pcc.html')
diff --git a/static/css/relative_rank.css b/static/css/relative_rank.css
index 31448bc..96b2bf0 100644
--- a/static/css/relative_rank.css
+++ b/static/css/relative_rank.css
@@ -1,13 +1,86 @@
 .item {
-    border: 1px solid black;
-    width: fit-content;
-    list-style: none;
-    padding: 5px;
-    margin: 5px 0;
+  border: 1px solid lightgrey;
+  min-width: 6em;
+  width: fit-content;
+  list-style: none;
+  padding: 5px;
+  margin: 5px 0;
+  border-radius: 5px;
+}
+
+.rank {
+  list-style: none;
+  margin-top: 10px;
+  min-width: 6em;
+  width: 120px;
+  height: 10px;
+  background: red;
+  position: relative;
+  border-radius: 10px;
+}
+.rank::before {
+  content: "";
+  position: absolute;
+  right: 0%;
+  top: -7.5px;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: red;
 }
 
 .flex-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-}
\ No newline at end of file
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.unranked-items {
+  flex-grow: 1;
+  text-align: center;
+}
+
+.ranked-items {
+  flex-grow: 1;
+  text-align: center;
+}
+#unranked-items {
+  display: inline-block;
+  min-height: 7rem;
+  min-width: 7em;
+  justify-content: center;
+}
+
+#ranked-items {
+  display: inline-block;
+  min-height: 7rem;
+  min-width: 12em;
+}
+
+#add-btn {
+  background: #03df4d;
+  border: none;
+  border-radius: 5px;
+}
+
+#clear-btn {
+  background: #e62d2d;
+  border: none;
+  border-radius: 5px;
+}
+
+.delete {
+  border: none;
+  background: none;
+}
+
+.delete:hover {
+  border: none;
+  background: darkgray;
+}
+
+.rank-btns {
+  border: none;
+  border-radius: 5px;
+  background: #03df4d;
+}
diff --git a/static/css/styles.css b/static/css/styles.css
index 5f32c60..c183451 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -59,14 +59,7 @@ main {
 }
 /* styles.css */
 
-#add-rank-btn, #save-btn {
-  background-color: #7A288A; /* This is a deep purple color */
-  border-color: #7A288A;
-}
 
-#add-rank-btn:hover, #save-btn:hover {
-  background-color: #55107B; /* This is a darker shade of purple for hover effect */
-}
 
 li .nav {
     list-style: none;
diff --git a/static/js/ranking.js b/static/js/ranking.js
index 6a49477..abc4ac1 100644
--- a/static/js/ranking.js
+++ b/static/js/ranking.js
@@ -1,3 +1,109 @@
+const unranked = document.getElementById("unranked-items");
+const ranked = document.getElementById("ranked-items");
+const ranks = document.getElementById("ranks");
+const addItemButton = document.getElementById("add-btn");
+const clearButton = document.getElementById("clear-btn");
+const lockButton = document.getElementById("lock-rank-btn");
+const addRankButton = document.getElementById("add-rank-btn");
+const saveButton = document.getElementById("save-rank-btn");
+let locked = false;
+const unrankedPool = new Sortable(unranked, {
+    group: 'items',
+    animation: 100,
+    sort: false
+})
+
+const rankedPool = new Sortable(ranked, {
+    group: 'items',
+    animation: 100
+})
+
+const ranksPool = new Sortable(ranks, {
+    group: {
+        name: 'items-sorted',
+    },
+    animation: 100,
+
+    sort: false
+})
+
+addItemButton.addEventListener("click", () => {
+    const newItem = prompt("Name of new item: ");
+    if (newItem) {
+        let total = Array.from(unranked.children).length + Array.from(ranked.children).length;
+        const li = document.createElement("li");
+        li.className = "item";
+        li.textContent = newItem;
+        li.draggable = true;
+        li.id = String(total) + "-item";
+        const btn = document.createElement("button");
+        btn.className = "delete";
+        btn.textContent = "X";
+        btn.id = String(total) + "-delete";
+        btn.setAttribute("onClick", "deleteItem(id);");
+        li.appendChild(btn);
+        unranked.appendChild(li);
+    }
+})
+
+clearButton.addEventListener("click", () => {
+    const userConsent = confirm("Are you sure you want to clear all items from Unranked List?");
+    if (userConsent) {
+        Array.from(unranked.children).forEach((value) => {
+            document.getElementById(value.id).remove()
+        })
+    }
+})
+
+lockButton.addEventListener("click", () => {
+    if (locked) {
+        rankedPool.options.group.name = "items";
+        rankedPool.options.filter = ".rank";
+        lockButton.innerText = "Lock Ranks";
+        Array.from(ranked.children).forEach((value) => {
+            if (value.className === "item") {
+                value.children[0].hidden = false;
+            }
+        })
+        locked = false;
+    } else {
+        rankedPool.options.group.name = "items-sorted";
+        rankedPool.options.filter = ".item";
+        lockButton.innerText = "Unlock Ranks";
+        Array.from(ranked.children).forEach((value) => {
+            if (value.className === "item") {
+                value.children[0].hidden = true;
+            }
+        })
+        locked = true;
+    }
+
+})
+
+function deleteItem(id) {
+    //console.log("kill me ("+ id + ")")
+    const userConsent = confirm("Are you sure?");
+    if (userConsent) {
+        let liId = id.split("-")[0] + "-item";
+        document.getElementById(liId).remove()
+        //need to handle the id's naming
+        let index = 0;
+        Array.from(unranked.children).forEach((value) => {
+            value.id = index + "-item";
+            value.children[0].id = index + "-delete";
+            index++;
+        })
+        Array.from(ranked.children).forEach((value) => {
+            if(value.className === "item"){
+            value.id = index + "-item";
+            value.children[0].id = index + "-delete";
+            index++;
+            }
+        })
+    }
+}
+
+/* Basic dragging list options
 function dragstart_handler(ev) {
     console.log("dragStart");
     // Change the source element's background color to signify drag has started
@@ -22,7 +128,7 @@ function drop_handler(ev) {
     // payload by the dragstart event handler)
     var id = ev.dataTransfer.getData("text");
     // Only Move the element if the source and destination ids are both "move"
-    if (id == "src_move" && ev.target.id == "drop-target"){
+    if (id.includes("src_move") && ev.target.id == "drop-target"){
         ev.target.appendChild(document.getElementById(id));
         ev.target.style.background = "white";
     }
@@ -38,4 +144,4 @@ function dragend_handler(ev) {
     // Restore source's border
     //ev.target.style.border = "solid black";
     ev.target.style.background = "white";
-}
\ No newline at end of file
+} */
\ No newline at end of file
diff --git a/static/js/ranking_ai.js b/static/js/ranking_ai.js
index 01aba68..2db437f 100644
--- a/static/js/ranking_ai.js
+++ b/static/js/ranking_ai.js
@@ -58,6 +58,11 @@ addRankBtn.addEventListener("click", () => {
 document.getElementById("save-btn").addEventListener("click", () => {
     // Get ranked items
     const rankedItems = Array.from(rankingArea.children).map((item) => item.textContent.trim());
+    const ranks = Array.from(ranksPool.children).map((item) => parseInt(item.lastElementChild.value || "0"));
+    Array.from(ranks).forEach((item, index) => {
+        console.log([item, index])
+        
+    });
     const sTierEnd = parseInt(document.getElementById("s-tier-end").value || "0");
     const aTierEnd = parseInt(document.getElementById("a-tier-end").value || "0");
 
@@ -92,6 +97,6 @@ document.getElementById("save-btn").addEventListener("click", () => {
         },
         body: JSON.stringify({ rankedItems, tiers }),
     })
-    .then((response) => response.json())
-    .catch((error) => console.error("Error:", error));
+        .then((response) => response.json())
+        .catch((error) => console.error("Error:", error));
 });
diff --git a/templates/pcc.html b/templates/pcc.html
index 22cb107..3c1d8f0 100644
--- a/templates/pcc.html
+++ b/templates/pcc.html
@@ -12,19 +12,20 @@
     <br>
     <label>Percent dropped: </label>
     <!-- <input type="number" name="drop" value="{{ request.form['drop'] }}""> -->
-    <input type="range" name="drop" min="0" max="100" step="1" value="{{ request.form['drop'] }}" onchange="updateTextInput(this.value, this.name);">
-    <input type="text" id="drop" value=""> 
+    <input type="range" id="dropRange" min="0" max="100" step=".01" value="{{ request.form['drop'] }}" onchange="updateTextInput(this.value, 'dropTextField');">
+    <input type="number" id="dropTextField" min="0" max="100" step=".01" name="drop" value="" onchange="updateTextInput(this.value, 'dropRange');"> 
     <br>
     <label>Percent raised after drop: </label>
     <!-- <input type="number" name="raise" value="{{ request.form['raise'] }}""> -->
-    <input type="range" name="raise" min="0" max="200" step="1" value="{{ request.form['raise'] }}" onchange="updateTextInput(this.value, this.name);">
-    <input type="text" id="raise" value="">
+    <input type="range" id="raiseRange" min="0" max="200" step=".01" value="{{ request.form['raise'] }}" onchange="updateTextInput(this.value, 'raiseTextField');">
+    <input type="number" name="raise" id="raiseTextField" min="0" max="200" step=".01" value="" onchange="updateTextInput(this.value, 'raiseRange');">
     <br>
     <button type="submit">Submit</button>
 </form>
 
 {% if value %}
 <p>{{'%0.2f' % value[0]|float}} will drop to {{'%0.2f' % value[1]|float}} and then go back up to {{'%0.2f' % value[2]|float}} a difference of {{'%0.2f' % (value[0] - value[2])|float}} ({{'%0.2f' % ((value[0]-value[2])/value[0] * 100)|float}}% of original value)</p>
+<p>To get back to the original value the dropped value would need to go up by {{'%0.2f' % value[3]|float}}%</p>
 {% endif %}
 {% endblock %}
 
diff --git a/templates/relative_rank.html b/templates/relative_rank.html
index e359c8f..f9559a1 100644
--- a/templates/relative_rank.html
+++ b/templates/relative_rank.html
@@ -5,15 +5,43 @@
 <link rel="stylesheet" href="{{ url_for('static', filename='css/relative_rank.css') }}">
 <div class="flex-container">
     <div class="unranked-items">
-        Unranked Items
-        <ul>
-            <li draggable="true" id="src_move" class="item" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);">Item A</li>
-            <li draggable="true" id="src_move" class="item" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);">Item B</li>
+        <h2>Unranked Items</h2>
+        <div>
+            <button id="add-btn">Add Item</button>
+            <button id="clear-btn">Clear All</button>
+        </div>
+
+        <ul id="unranked-items">
+            {% for i in range(10)%}
+            <li id="{{i}}-item" draggable="true" class="item">Item {{i}}
+                <button id="{{i}}-delete" class="delete" onclick="deleteItem(id)">X</button>
+            </li>
+            {% endfor %}
         </ul>
     </div>
 
-    <div id="drop-target" class="ranked-items" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
-        Ranked Items
+    <div id="drop-target" class="ranked-items">
+        <h2>Ranked Items</h2>
+        <div>
+            <button id="lock-rank-btn" class="rank-btns">Lock Ranks</button>
+        </div>
+        <ul id="ranked-items">
+
+        </ul>
+    </div>
+
+    <div id="ranks-container" class="ranks-container">
+        <h2>Ranks</h2>
+        <div>
+            <button id="add-rank-btn" class="rank-btns">Add Rank</button>
+            <button id="save-rank-btn"class="rank-btns">Save Ranks</button>
+        </div>
+        <ul id="ranks">
+            {% set colors = ["gold", "green", "blue", "yellow", "red"] -%}
+            {%for x in ["S", "A", "B", "C", "F"]%}
+            <li id="{{loop.index}}-rank" class="rank" draggable="true" style="background: {{colors[loop.index-1]}};">{{x}}-Rank</li>
+            {%endfor%}
+        </ul>
     </div>
 </div>
 <script src="{{ url_for('static', filename='js/ranking.js') }}"></script>
diff --git a/templates/relative_rank_ai.html b/templates/relative_rank_ai.html
index c367c1a..451e3e3 100644
--- a/templates/relative_rank_ai.html
+++ b/templates/relative_rank_ai.html
@@ -8,9 +8,9 @@
     <div class="col-md-4">
         <h4>Items Pool</h4>
         <ul id="items-pool" class="list-group">
-            <li class="list-group-item" draggable="true">Item A</li>
-            <li class="list-group-item" draggable="true">Item B</li>
-            <li class="list-group-item" draggable="true">Item C</li>
+            {%for item in ["A", "B", "C", "D", "E", "F"] %}
+            <li class="list-group-item" draggable="true">Item {{item}}</li>
+            {%endfor%}
         </ul>
         <button class="btn btn-primary mt-2" id="add-item-btn">Add Item</button>
     </div>
@@ -26,14 +26,13 @@
         <h4>Tier Settings</h4>
         <div id="tiers">
             <ul id="ranks">
+            {%for rank in ["S", "A", "B", "C", "F"] %}
             <li class="mb-2">
-                <label>S-Tier Range:</label>
-                <input type="number" id="s-tier-end" class="form-control" placeholder="Enter last rank for S-Tier">
-            </li>
-            <li class="mb-2">
-                <label>A-Tier Range:</label>
-                <input type="number" id="a-tier-end" class="form-control" placeholder="Enter last rank for A-Tier">
+                <label>{{rank}}-Tier Range:</label>
+                <input type="number" id="{{rank}}-tier-end" class="form-control" placeholder="Enter last rank for {{rank}}-Tier">
             </li>
+            {%endfor%}
+            
             </ul>
             <!-- Add more tiers as needed -->
         </div>
@@ -42,5 +41,5 @@
     </div>
 </div>
 
-<script src="{{ url_for('static', filename='js/ranking.js') }}"></script>
+<script src="{{ url_for('static', filename='js/ranking_ai.js') }}"></script>
 {%endblock%}
\ No newline at end of file
diff --git a/templates/weather.html b/templates/weather.html
index 2d4b3be..e6ac02f 100644
--- a/templates/weather.html
+++ b/templates/weather.html
@@ -9,7 +9,7 @@
         Temperature: {{ temperature }} {{ temperature_unit }}
         |
         <!-- Convert Celsius to Fahrenheit using (°C * 9/5) + 32 formula -->
-        {{(temperature * 9/5) + 32}}°F
+        {{'%0.1f' % ((temperature * 9/5) + 32)|float}}°F
     </p>
 
     <!-- Display wind speed with unit -->