diff --git a/startpage.html b/startpage.html
index 4d6cdb9..7312f0e 100644
--- a/startpage.html
+++ b/startpage.html
@@ -160,18 +160,6 @@
     </style>
   </head>
   <body>
-    <div class="movable" id="mainContainer">
-      <div style="margin: auto">
-        <div id="clock">
-          <span id="date"></span>
-          <br />
-          <span id="time"></span>
-        </div>
-        <hr id="containerDivider" />
-        <div id="linkContainer"></div>
-      </div>
-    </div>
-
     <div style="display: flex; flex-direction: column">
       <div id="imageRemovalWarning" class="hidden">
         IMAGE REMOVAL MODE ACTIVE!!
@@ -193,6 +181,13 @@
           <span class="tab" id="resetTab">reset data</span>
           <span class="tab" id="instructionsTab">instructions</span>
         </div>
+
+        <!-- note to self: 
+           - i should rename these so they don't end in "Form",
+           - rather something like "Page". to do that though i need
+           - to change the logic for switching tabs that has the string
+           - modification hardcoded
+        -->
         <div id="instructionsForm">
           <p id="helpText">
             you are now editing the page!<br /><br />
@@ -250,15 +245,18 @@
           </p>
         </div>
 
-        <form id="addContainerForm" onsubmit="return false">
-          <div class="formTitle">add new containers / layers</div>
+        <form id="containerForm" onsubmit="return false">
+          <div id="containers">
+            <p class="formTitle">layers:</p>
+          </div>
+          <div class="formTitle">add new layer</div>
           <input
             id="newContainerNameInput"
-            placeholder="new container name"
+            placeholder="new layer name"
             type="text"
           />
           <button id="newContainerCreateButton" onclick="createNewContainer()">
-            create new container
+            create new layer
           </button>
         </form>
 
@@ -465,6 +463,7 @@
 
     class Container {
       id;
+      name;
       x;
       y;
       height;
@@ -483,7 +482,9 @@
         containerSettings,
         sections
       ) {
+        this.name = name;
         this.id = name.replace(" ", "-");
+
         // if initializing saved container content,
         if (x !== undefined && y !== undefined) {
           this.x = x;
@@ -510,12 +511,12 @@
         // apply bookmarks
         this.loadBookmarks();
         // then create container options UI in settings menu
-        this.insertContainerOptionsMenu();
+        this.insertContainerSettingsListing();
         this.applyContainerSettings();
         
         // establish necessary event listeners
         this.addContainerEventListeners()
-        this.addSettingsEventListeners();
+        this.addSettingsMenuEventListeners();
 
         // and save
 
@@ -668,10 +669,25 @@
       /**
        * creates container options menu in page settings menu
        */
-      insertContainerOptionsMenu() {
-        document.getElementById("addContainerForm").insertAdjacentHTML(
+      insertContainerSettingsListing() {
+        document.getElementById("containers").insertAdjacentHTML(
           "beforeend",
           `
+          /**
+            * TODO: 
+            * make the menus intially invisible
+            * implement a toggle visibility function
+            * add the classes for menu layer depths for easier distinction later
+            * brainstorm best approach to UI/UX for these nested menus
+            * --> remove "images" from wallpaper tab
+            * ----> furthermore, condense all global settings into one tab
+            * ----- including wallpaper, audio, cursor
+            * add toggles for each settings menu
+            * rename settings form div ids (see "note to self")
+            */
+          <div class="containerListing" id=${this.id + "-container-listing"}>
+          <p onclick="toggleContainerSettingsMenu(this)">${this.name} [expand]</p>
+          <div class="settingsMenu" id=${this.id + "-settings-menu"}>
             <div id=${this.id + "-bookmark-menu"} >
               <h1 class="formTitle">add bookmarks</h1>
               <div>
@@ -688,7 +704,6 @@
               </div>
 
               <button onclick="addLink(${this.id})">add link</button>
-
             </div>
 
             <br />
@@ -861,6 +876,8 @@
                   <input id=${this.id + "-settings-shadow-alpha"} />
               </div>
             </div>
+          </div>
+          </div>
           `
         );
       }
@@ -1087,7 +1104,7 @@
       /**
        * applies event listeners on container options inputs in settings menu
        */
-      addSettingsEventListeners() {
+      addSettingsMenuEventListeners() {
         // container color setting listeners
         document
           .getElementById(this.id + "-settings-bg-color")
@@ -1373,7 +1390,7 @@
         width: "",
         height: "",
       };
-      setupSettingsMenu();
+      setupContainerSettingsMenu();
 
       /** load container data */
       let containerMapValues =
@@ -1413,7 +1430,7 @@
     /**************************
      * INITIALIZATION HELPERS *
      **************************/
-    function setupSettingsMenu() {
+    function setupContainerSettingsMenu() {
       let settingsContainer = document.getElementById("settingsContainer");
 
       /* set at the last saved location */
