diff --git a/public/js_original/profile-view.js b/public/js_original/profile-view.js
new file mode 100644
index 0000000..63ef734
--- /dev/null
+++ b/public/js_original/profile-view.js
@@ -0,0 +1,30 @@
+function openTab(evt, tabName) {
+  console.log("New tab = " + tabName);
+
+  // hide all tab contents
+  const tabcontents = [...document.getElementsByClassName("tabcontent")];
+  for (let i = 0; i < tabcontents.length; i++) {
+    tabcontents[i].style.display = "none";
+  }
+
+  // remove active class from the currently active tab link
+  const tablinks = document.getElementsByClassName("tablink");
+  for (let i = 0; i < tablinks.length; i++) {
+    tablinks[i].className = tablinks[i].className.replace(" active", "");
+  }
+
+  // display content for clicked tab
+  document.getElementById(tabName).style.display = "block";
+
+  // set active class only to the clicked tab link
+  evt.currentTarget.className += " active";
+}
+
+const tabs = ["Account", "Orders", "Settings"];
+
+window.addEventListener("DOMContentLoaded", () => {
+  [...document.getElementsByClassName("tablink")].forEach((tablink, i) => {
+    console.log(i, tablink);
+    tablink.addEventListener("click", (e) => openTab(e, tabs[i]));
+  });
+});
\ No newline at end of file
diff --git a/public/styles/views/Profile.css b/public/styles/views/Profile.css
index dd8bc4c..f89067b 100644
--- a/public/styles/views/Profile.css
+++ b/public/styles/views/Profile.css
@@ -18,11 +18,32 @@ button[name="account_delete_submit"] {
   background-color: red;
 }
 
-table button{
-  padding:5px;
+table button {
+  padding: 5px;
 }
 
-table tr button:first-of-type{
+table tr button:first-of-type {
   border: 0;
   background-color: red;
+}
+
+/* Style tab links */
+.tablink {
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  font-size: 17px;
+  background-color: var(--secondary);
+}
+
+.active {
+  background-color: var(--contrast);
+  color: var(--contrast-inverse);
+}
+
+/* Style the tab content (and add height:100% for full page content) */
+.tabcontent {
+  display: none;
+  padding: 20px 0;
 }
\ No newline at end of file
diff --git a/src/views/Profile.php b/src/views/Profile.php
index 14f600b..e4b95f3 100644
--- a/src/views/Profile.php
+++ b/src/views/Profile.php
@@ -15,27 +15,22 @@
 
 ?>
 
-<style>
-  /* Style tab links */
-  .tablink {
-    float: left;
-    border: none;
-    outline: none;
-    cursor: pointer;
-    font-size: 17px;
-    background-color: var(--secondary);
-  }
-
-  .active {
-    background-color: var(--contrast);
-  }
-
-  /* Style the tab content (and add height:100% for full page content) */
-  .tabcontent {
-    display: none;
-    padding: 20px 0;
-  }
-</style>
+<?php
+if ($show_account_deletion_confirmation) : ?>
+    <dialog open>
+        <article>
+            <h3>Deleting your account! </h3>
+            <p>Are you sure you want to delete your account? This action is irreversible.</p>
+            <footer>
+                <form method="post" class="grid">
+                    <button class="secondary" type="submit" name="cancel_delete">Cancel</button>
+                    <button type="submit" name="confirm_delete">Confirm</button>
+                </form>
+            </footer>
+        </article>
+    </dialog>
+<?php
+endif; ?>
 
 <main class="container">
     <h1>My profile</h1>
@@ -173,53 +168,4 @@
     </div>
 </main>
 
-<script>
-  function openTab(evt, tabName) {
-    console.log("New tab = " + tabName);
-
-    // hide all tab contents
-    const tabcontents = [...document.getElementsByClassName("tabcontent")];
-    for (let i = 0; i < tabcontents.length; i++) {
-      tabcontents[i].style.display = "none";
-    }
-
-    // remove active class from the currently active tab link
-    const tablinks = document.getElementsByClassName("tablink");
-    for (let i = 0; i < tablinks.length; i++) {
-      tablinks[i].className = tablinks[i].className.replace(" active", "");
-    }
-
-    // display content for clicked tab
-    document.getElementById(tabName).style.display = "block";
-
-    // set active class only to the clicked tab link
-    evt.currentTarget.className += " active";
-  }
-
-  const tabs = ["Account", "Orders", "Settings"];
-
-  window.addEventListener("DOMContentLoaded", () => {
-    [...document.getElementsByClassName("tablink")].forEach((tablink, i) => {
-          console.log(i, tablink);
-          tablink.addEventListener("click", (e) => openTab(e, tabs[i]));
-        },
-    );
-  });
-</script>
-
-<?php
-if ($show_account_deletion_confirmation) : ?>
-    <dialog open>
-        <article>
-            <h3>Deleting your account! </h3>
-            <p>Are you sure you want to delete your account? This action is irreversible.</p>
-            <footer>
-                <form method="post" class="grid">
-                    <button class="secondary" type="submit" name="cancel_delete">Cancel</button>
-                    <button type="submit" name="confirm_delete">Confirm</button>
-                </form>
-            </footer>
-        </article>
-    </dialog>
-<?php
-endif; ?>
\ No newline at end of file
+<script src="/js/profile_view.bundle.js"></script>
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 0e3497f..42397bb 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,6 +7,7 @@ module.exports = {
     global_view: entryPath + "global-view.js",
     home_view: entryPath + "home-view.js",
     product_view: entryPath + "product-view.js",
+    profile_view: entryPath + "profile-view.js",
     cart_view: entryPath + "cart-view.js",
     theme_switcher: entryPath + "theme-switcher.js",
   },