diff --git a/css/style.css b/css/style.css
index 134028f..f1f9d32 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,11 +1,63 @@
 /* global styles  */
-
+*{
+    box-sizing: border-box;
+   
+}
 /* element styles */
 
+
+
+body{
+    margin: 0;
+    min-height: 100vh;
+    background-color: #e6e6e6 ;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+
+}
+h1{
+    font-size: 3.5rem;
+   /* margin: 0;*/
+
+}
 /* layout */
+.container{
+    border: 3px solid blue;
+    width: 90vw;
+    margin: 0 auto;
+}
+.button-wrapper{
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+}
+.stats-wrapper{
 
+}
+.game-state-wrapper{
+    display: flex;
+    justify-content: center;
+}
 /* headings */
+.game-title{
+    text-align: center;
 
-/* buttons */
+}
 
+/* buttons */
+.button-wrapper button {
+    background-color: rgb(11, 153, 255);
+    color: white;
+    padding: 1.3rem 1.5 rem;
+    font-size: 1.8rem;
+    border: .2rem solid #134a71;
+    border-radius: .25 rem;
+}
+.button-wrapper button:active{
+    background-color: #197bc2;
+    border: .2rem solid #0b3553;
+}
 /* images */
+.game-graphic{
+max-height: 33vmin;
+}
diff --git a/index.html b/index.html
index 18d09e9..33196a5 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,28 @@
 </head>
 
 <body>
-        <h1>Tamagotchi Code Along</h1>
+    <header></header>
+        <h1 class = "game-title">Tamagotchi Code Along</h1>
+    </header>
+    <main class = "container">
+        <section id ="controller" class = "button-wrapper">
+            <!-- button wrapper -->
+        <button>feed</button>
+        <button>play</button>
+        <button>sleep</button>
+        </section>
+        <section id = "stat-display" class = "stats-wrapper">
+              <!-- state display -->
+              <p>Happiness: <span id ="boredom-stat">10</span></p>
+              <p>Hunger: <span id = "hunger-stat">0</span></p>
+              <p>Tiredness: <span id = "sleepiness-stat">5</span></p>
+        </section>
+        <section id = "game-state" class = "game-state-wrapper">
+              <!-- game state UI  -> user interface for seeing changes to game-->
+              <img id = "tama-graphic"src="./imgs/wolf-1.png" class = "game-graphic">
+        </section>
+
+    </main>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index f1af6c4..b9819c1 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,15 +1,66 @@
 console.log('js:loaded')
-
 /*----- constants -----*/
+// initial data states
+// animation names
+// image assets paths
 
+const INIT_STATE = {
+    boredom: 0, 
+    hunger: 0, 
+    sleepiness: 0,
+}
 
 /*----- state variables -----*/
+// state is the data that will change while the game is running​
+// let boredom; // integer
+// let hunger; // integer
+// let sleepiness; // integer​
+let state;
 
+// HFM later on - icebox features (age cycle for tama)
+let age;
+let cycles; 
 
+let timer; // setInterval id
+let interval; // count of cycles 
 /*----- cached elements  -----*/
+const boredomStatEl = document.querySelector('#boredom-stat')
+const hungerStatEl = document.querySelector('#hunger-stat')
+const sleepyStatEl = document.querySelector('#sleepiness-stat')
+
+// TODO: add cache for game message string once added to game​
+const gameBtnEls = document.querySelectorAll('#controller button')
 
+// TODO: add cache for restart button after game over
 
 /*----- event listeners -----*/
 
+/*----- functions -----*/
+
+init() // starts game when js loads​
+
+function init(){
+    // init will start the game and load the initial values for our game state​
+    state = {...INIT_STATE} 
+    // taking th init state object -> copy of its content and storing into a new object
+    // assigning the new object to the state variable
+
+    age = 0 ;
+    cycles = 0; 
+    interval = 5000; // ms pass for each cycles 
+    timer = setInterval(runGame, interval); // setInterval id
+    
+    // TODO / ICEBOX - init() on load and after a reset (optional)
+    
+    console.log("game has started")
+    
+    // it will also call render() -> dom updates (trigger all render helper function -> updating stats)
+    render()
+}
 
-/*----- functions -----*/
\ No newline at end of file
+function runGame(){
+    console.log('game is running')
+}
+function render(){
+    console.log('rendering game')
+}
\ No newline at end of file
