diff --git a/app/src/main/java/com/example/pagingapp/database/GroupData.kt b/app/src/main/java/com/example/pagingapp/database/GroupData.kt
new file mode 100644
index 0000000..33ea13b
--- /dev/null
+++ b/app/src/main/java/com/example/pagingapp/database/GroupData.kt
@@ -0,0 +1,36 @@
+package com.example.pagingapp.database
+
+import com.example.pagingapp.views.CellInfo
+
+data class GroupData(val index: Int, val description: String, val members: List<String>){
+    companion object{
+        /**
+         * Get the headers for the group data table
+         * @return List of cellinfo representing the headers
+         */
+        fun getHeaders(): List<CellInfo>{
+            return listOf(
+                CellInfo("Index", 0.1f),
+                CellInfo("Description", 0.3f),
+                CellInfo("Members", 0.6f)
+            )
+        }
+
+        /**
+         * Generate preview data for the group data table
+         * @return List of GroupData for preview purposes
+         */
+        fun previewData(): List<GroupData>{
+            return listOf(
+                GroupData(1,"Group One", listOf("A","B","C")),
+                GroupData(2,"Group Two", listOf("D","E","F")),
+                GroupData(3,"Group Three", listOf("G","H","I")),
+                GroupData(4,"Group Four", listOf("J","K","L")),
+                GroupData(5,"Group Five", listOf("M","N","O")),
+                GroupData(6,"Group Six", listOf("P","Q","R")),
+                GroupData(7,"Group Seven", listOf("S","T","U")),
+                GroupData(8,"Group Eight", listOf("V","W","X"))
+            )
+        }
+    }
+}
diff --git a/app/src/main/java/com/example/pagingapp/views/CellInfo.kt b/app/src/main/java/com/example/pagingapp/views/CellInfo.kt
new file mode 100644
index 0000000..08b35c7
--- /dev/null
+++ b/app/src/main/java/com/example/pagingapp/views/CellInfo.kt
@@ -0,0 +1,4 @@
+package com.example.pagingapp.views
+
+
+data class CellInfo(val title: String, val weight: Float)
diff --git a/app/src/main/java/com/example/pagingapp/views/Group.kt b/app/src/main/java/com/example/pagingapp/views/Group.kt
index 38fbe17..88335a0 100644
--- a/app/src/main/java/com/example/pagingapp/views/Group.kt
+++ b/app/src/main/java/com/example/pagingapp/views/Group.kt
@@ -1,9 +1,104 @@
 package com.example.pagingapp.views
 
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.horizontalScroll
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.material3.FilledTonalButton
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.PreviewScreenSizes
+import androidx.compose.ui.unit.dp
+import com.example.pagingapp.database.GroupData
 
+
+
+@PreviewScreenSizes
 @Composable
 fun GroupView(modifier: Modifier = Modifier){
+    val scrollstate = rememberScrollState()
+    Scaffold(modifier=modifier.fillMaxSize(), bottomBar = {ButtonBar()
 
+    }) { padding ->
+        Column(modifier = Modifier.padding(padding)) {
+            TableHeader(scrollstate, GroupData.getHeaders())
+            TableContent(scrollstate, GroupData.previewData())
+        }
+
+    }
+
+}
+
+@Composable
+fun TableHeader(scrollState: ScrollState, headers: List<CellInfo>){
+    Row(Modifier
+        .fillMaxWidth()
+        .horizontalScroll(scrollState)
+        .height(40.dp)
+        .background(Color.LightGray)
+        .padding(5.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ){
+        for(hh in headers){
+            Text(hh.title, modifier = Modifier.weight(hh.weight))
+        }
+    }
+
+}
+
+@Composable
+fun TableContent(scrollState: ScrollState, groupData: List<GroupData>){
+    LazyColumn(modifier = Modifier.fillMaxSize()) {
+        items(groupData.size){ rowindex ->
+            val row = groupData[rowindex]
+            Row(Modifier
+                .fillMaxWidth()
+                .horizontalScroll(scrollState)
+                .height(40.dp)
+                .padding(5.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ){
+                Text(row.index.toString(), modifier = Modifier.weight(0.1f))
+                Text(row.description, modifier = Modifier.weight(0.3f))
+                Text(row.members.joinToString(","), modifier = Modifier.weight(0.6f))
+            }
+        }
+
+    }
+}
+
+@Composable
+fun ButtonBar(){
+    Row(modifier = Modifier.fillMaxWidth().padding(10.dp).height(75.dp)){
+        FilledTonalButton(onClick = { /* TODO: Handle save action */ }, modifier = Modifier.weight(1f).padding(8.dp, 0.dp).fillMaxHeight()) {
+            Text("Initialize")
+        }
+        FilledTonalButton(onClick = { /* TODO: Handle save action */ }, modifier = Modifier.weight(1f).padding(8.dp, 0.dp).fillMaxHeight()) {
+            Text("Add")
+        }
+        FilledTonalButton(onClick = { /* TODO: Handle save action */ }, modifier = Modifier.weight(1f).padding(8.dp, 0.dp).fillMaxHeight()) {
+            Text("Delete")
+        }
+        FilledTonalButton(onClick = { /* TODO: Handle save action */ }, modifier = Modifier.weight(1f).padding(8.dp, 0.dp).fillMaxHeight()) {
+            Text("Edit")
+        }
+        FilledTonalButton(onClick = { /* TODO: Handle save action */ }, modifier = Modifier.weight(1f).padding(8.dp, 0.dp).fillMaxHeight()) {
+            Text("Export")
+        }
+        FilledTonalButton(onClick = { /* TODO: Handle save action */ }, modifier = Modifier.weight(1f).padding(8.dp, 0.dp).fillMaxHeight()) {
+            Text("Import")
+        }
+    }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/example/pagingapp/views/Setting.kt b/app/src/main/java/com/example/pagingapp/views/Setting.kt
index 5fc5224..8b7c3da 100644
--- a/app/src/main/java/com/example/pagingapp/views/Setting.kt
+++ b/app/src/main/java/com/example/pagingapp/views/Setting.kt
@@ -25,9 +25,11 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.tooling.preview.PreviewScreenSizes
 import androidx.compose.ui.unit.dp
 import com.example.pagingapp.R
 
+@PreviewScreenSizes
 @Composable
 fun SettingView(modifier: Modifier = Modifier){
     var vx3kip by remember { mutableStateOf("192.168.14.1") }
diff --git a/app/src/main/java/com/example/pagingapp/views/Zone.kt b/app/src/main/java/com/example/pagingapp/views/Zone.kt
index 2825c7a..ea2c24c 100644
--- a/app/src/main/java/com/example/pagingapp/views/Zone.kt
+++ b/app/src/main/java/com/example/pagingapp/views/Zone.kt
@@ -2,7 +2,9 @@ package com.example.pagingapp.views
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.PreviewScreenSizes
 
+@PreviewScreenSizes
 @Composable
 fun ZoneView(modifier: Modifier = Modifier){
 
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index f8c6127..88ef65d 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -7,4 +7,6 @@
     <color name="teal_700">#FF018786</color>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
+    <color name="table_header">#e28743</color>
+    <color name="button">#2596be</color>
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index d065d5a..5ad471a 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -10,4 +10,5 @@
     <string name="setting_vx3kport">Port</string>
     <string name="setting_savebutton">Save</string>
     <string name="setting_micvolume">Microphone Volume</string>
+
 </resources>
\ No newline at end of file